问题
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.
I have this:
$(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'});
});
})
})
回答1:
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="#">')
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>
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">');
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" />');
Which can be later removed:
$('#statusGraphic').empty();
回答2:
This part is odd:
$('#next2_btn'.value)
The problem is likely in there...
回答3:
I'm not sure I understand the complete mechanics of what you want to accomplish, but this is invalid:
$('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">')
This would ask jQuery to first find the #next2_btn element (i.e., $('#next2_btn')) and would then try to call the .$() function on the result. That function does not exist.
Further, the expression '#next2_btn'.value tries to access the .value property of the string '#next2_btn' which also does not exist.
So we've got two errors floating around just in that middle bit, each of which would be enough to derail the entire statement.
Perhaps you meant:
$('#next2_btn').html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">');
This simply finds the #next2_btn and sets the HTML inside to be that <area> tag. This is valid only if #next2_btn is an element other than an input. If it's an input, you can't change its HTML; you can only change its value with the .val('...') method. (Or replace it entirely with the .replaceWith() method.)
回答4:
Sorry, I had posted some 'testing' code... that line isn't there.
I want to change the id of a link so that I can use that link again, only load something else. So my html is:
<map name="Map">
<area shape="rect" coords="826,935,906,971" id="next2_btn" href="#">
</map>
and after they click this, the previous code runs to fade an existing div, show a hidden one, and initiate a certain animation on three graphics. So, after that, I want the id to change so that I can write new animations and replace graphics with the same link. This is all to avoid refreshes.
So, I'm just trying to see if it's possible to change the initial ID on a link. I first tried by selecting the div and rewriting the entire html you see above. Then, I tried selecting the ID and using the attribute as suggested above, but nothing has worked yet.
Thanks
回答5:
The id does change, it is just that the code has already been assigned to the element regardless of its future id value..
you should use the live method to bind the click event ..
$('#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*/...});
check a live example here : http://www.jsfiddle.net/6mFht/
来源：https://stackoverflow.com/questions/3007209/dynamically-changing-the-selector-text