jQuery的:单击后更改的ID

我有一个“下一个”按钮,淡出一个div,显示了另一种,改变了一个图形,然后......我希望它改变了“下一步”按钮,但没有实际的ID .html也不replaceWith似乎工作。

我有这个:

$(document).ready(function(){ $('#portfolio').fadeTo(500,0.25); $('#account') .animate({width:"10.1875em",height:"11.1875em",duration:'medium'}); $('#next2_btn').click(function(){ $('#content').fadeTo(300, 0.0, function() { $('#content2').show(300, function() { $('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">') $('#account').fadeTo(500,1.0) .animate({marginLeft:"220px", width:"2em",'height' :"2em",duration:'medium'}) .animate({ marginLeft:"400px", marginTop:"35px", width:"7em", height:"7em", duration:"medium" }, 'medium', 'linear', function() { $('#statusGraphic').replaceWith('<img src="state2_138x28.gif">'); }) .fadeTo(500,0.5); $('#portfolio') .fadeTo(500,1.5) .animate({marginLeft:"-175px", width:"2em",height:"2.5em",duration:'medium'}) .animate({marginLeft:"-330px", width:"8.5em",height:"9.9375em",duration:'medium'}); }); }) })

--------------解决方案-------------

我猜测,这是该行(这是无效的)是应该改变ID:

$('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">')

下面是改变一个地区的id属性的地图内的工作示例 - 测试并确认在Firefox,Chrome和IE8的工作(你将需要一个1.JPG图像复制到.html文件中包含此代码的位置为了看它的工作):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#next2_btn').click(function() {
// find current element
var element = $(this);

// get id
var id = element.attr('id');

// find the number portion of the id using regular expressions
var findNumberRegex = /next(\d+)_btn/;
var idNumber = parseInt(id.replace(findNumberRegex, "$1"));

// increment the number
idNumber++;

// re-assign the area id
element.attr('id', 'next' + idNumber + '_btn');
});

$('#showAreaId').click(function() {
alert('current id of area is ' + $('map[name="Map"]').find('area').attr('id'));
});
});
</script>
</head>

<body>
<img src="1.jpg" usemap="#Map" width="300" height="300" />
<map name="Map">
<area shape="rect" coords="0,0,300,300" id="next2_btn" alt="next2_btn" href="#" />
</map>
<button id="showAreaId">Show current ID of area</button>
</body>
</html>



在一个侧面说明,下面的行可能不会做你想要什么-这一次运行#statusGraphic将不复存在。

$('#statusGraphic').replaceWith('<img src="state2_138x28.gif">');

我不知道是什么类型的元素#statusGraphic是的,但如果它已经是一个形象,你可以这样做:

$('#statusGraphic').attr('src', 'state2_138x28.gif');

如果它尚未图像,或许追加一个图像,而不是:

$('#statusGraphic').append('<img src="state2_138x28.gif" />');

稍后可以删除:

$('#statusGraphic').empty();

这部分是奇怪的:

$('#next2_btn'.value)

这个问题很可能在那里...

我不知道我理解你想要完成的任务的完整机制,但这是无效的:

$('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">')

这会问的jQuery先找到#next2_btn元素(即$('#next2_btn')它会尝试调用.$()函数的结果。 该函数不存在。

此外,表述'#next2_btn'.value试图访问.value的字符串属性'#next2_btn'这也并不存在。

因此,我们有两个错误,只是在中间位左右浮动,每一个就足以破坏整个语句。

也许你的意思是:

$('#next2_btn').html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">');

这只是找到#next2_btn和设置HTML里面是<area>标签。 此条款仅对#next2_btn不是其他的元素input 。 如果它是一个input ,你不能改变它的HTML; 你只能用它的值更改.val('...')的方法。 (或者与完全取代它.replaceWith()方法。)

对不起,我已经发布了一些'测试'的代码......该行不存在。

我想换一个链接的ID,这样我可以再次使用该链接,只加载别的东西。 所以,我的HTML是:

<map name="Map">
<area shape="rect" coords="826,935,906,971" id="next2_btn" href="#">
</map>

之后他们点击这个,前面的代码运行褪色现有的分区,显示隐藏的一个,启动一个特定的动画三个图形。 所以,在那之后,我想的ID改变,这样我可以写新的动画,并有同一链接替换图形。 这一切都是为了避免刷新。

所以,我只是想看看是否有可能改变最初的ID的链接。 我先选择div和重写你看到上面的整个HTML尝试。 于是,我试着选择ID和使用属性作为上述建议,但没有奏效呢。

谢谢

该ID不会改变,这是刚才说的代码已经被分配到元素,无论其未来id值..

你应该使用现场方法绑定click事件..

$('#next2_btn').live('click', function(){
../*code for the button with id next2_btn which will change the id of the clicked element to anotherID*/...
// at some point run the following command
$(this).attr('id','anotherID');
});
$('#anotherID').live('click', function(){../*code that will run from elements that have #anotherID no matter when they get this id*/...});

检查一个活生生的例子在这里:http://www.jsfiddle.net/6mFht/

分类:jQuery的 时间:2015-03-14 人气:0
本文关键词: jQuery的,选择
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.527 (s). 10 q(s)