动态更改选择器文本 [英] dynamically changing the selector text
问题描述
我有一个'next'按钮，该按钮可以淡出div，显示另一个，更改图形，然后...我希望它更改'next'按钮的实际ID，但.html或
I have a 'next' button which fades out a div, shows another, changes out a graphic and then... I want it to change the actual ID of the 'next' button but neither .html nor replaceWith seem to be working.
我有这个:
$(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的行(无效):
I am guessing this is the line (which is invalid) that is supposed to change the 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文件的位置包含此代码以使其正常工作):
Here is a working sample of changing an id attribute of an area inside of a map - tested and confirmed working in Firefox, Chrome and IE8 (you will need to copy a 1.jpg image to the location of the .html file containing this code in order to see it work):
<!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就将不再存在.
On a side note, the line below may not be doing exactly what you want - once this runs, #statusGraphic will no longer exist.
$('#statusGraphic').replaceWith('<img src="state2_138x28.gif">');
我不确定元素#statusGraphic是什么类型，但是如果它已经是图像，则可以执行以下操作:
I'm not sure what type of element #statusGraphic is, but if it is already an image, you could do:
$('#statusGraphic').attr('src', 'state2_138x28.gif');
如果它还不是图像，则可以附加图像:
If it is not already an image, perhaps append an image instead:
$('#statusGraphic').append('<img src="state2_138x28.gif" />');
稍后可以将其删除:
$('#statusGraphic').empty();
这篇关于动态更改选择器文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
