Question

我有一个'下一个'按钮，淡出一个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'});
    });
        })
    })

Answer 1

我猜这是应该更改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();

Answer 2

这部分很奇怪：

$('#next2_btn'.value)

可能存在问题......

Answer 3

我不确定我理解你想要完成什么的完整机制，但这是无效的：

$('#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的{{1}}属性，该属性也不存在。

所以我们在中间位有两个错误，每个错误都足以破坏整个语句。

也许你的意思是：

'#next2_btn'

这只是找到$('#next2_btn').html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">');并将HTML内部设置为#next2_btn标记。仅当<area>是和#next2_btn以外的元素时，此选项才有效。如果是input，则无法更改其HTML;您只能使用input方法更改其值。（或者用.val('...')方法完全替换它。）

Answer 4

抱歉，我发布了一些'测试'代码......那条线不存在。

我想更改链接的ID，以便我可以再次使用该链接，只加载其他内容。所以我的HTML是：

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

并且在他们点击它之后，前面的代码运行以淡化现有div，显示隐藏的div，并在三个图形上启动某个动画。所以，在那之后，我想改变id，以便我可以编写新的动画并用相同的链接替换图形。这都是为了避免刷新。

所以，我只是想看看是否可以更改链接上的初始ID。我首先尝试选择div并重写你在上面看到的整个html。然后，我尝试选择ID并使用上面建议的属性，但还没有任何工作。

由于

Answer 5

id确实发生了变化，只是代码已经分配给元素而不管其未来的id值如何。

你应该使用live方法绑定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/

动态更改选择器文本

5 个答案: