动态改变选择器文本

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

来源

2010-06-09 kelly

这部分是奇数：

$('#next2_btn'.value)

的问题很可能在那里...

来源

2010-06-09 15:23:47 Koen

也许@Kelly来自PHP其中'.'把两个字符串，在这种情况下更换它带有'+'，你可能已经破解了这个案子！ – gnarf 2010-06-09 15:27:57

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

$('#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试图访问也不存在的字符串'#next2_btn'的.value属性。

所以我们有两个错误在中间位置浮动，每个错误都足以使整个陈述脱轨。

也许你的意思是：

$('#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()方法完全取代它。）

来源

2010-06-09 15:25:11 VoteyDisciple

如果你使用'replaceWith（）'而不是'html（）'，第二个例子可能是正确的。 @Kelly确实提到了尝试这个功能......你应该进一步强调'$（'＃next2_btn'）。$（...）'的无效性 - 它可能会导致$（'＃next2_btn'）。 $'不是函数错误... – gnarf 2010-06-09 15:30:02

我猜测这是应该改变的ID行（这是无效）：

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

这里被改变的工作示例测试并确认在Firefox，Chrome和IE8中工作的地图区域的id属性（您需要将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();

来源

2010-06-09 15:26:46

对不起，我发布了一些“测试”代码......该行不在那里。

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

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

，他们单击此之后，以前的代码运行褪色现有的DIV，显示隐藏的一个，和三个图形启动一定的动画。所以，在那之后，我想让id改变，这样我就可以编写新的动画并用相同的链接替换图形。这是为了避免刷新。

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

感谢

来源

2010-06-09 19:50:09

我让你成为一个工作示例（在我上面的回答中）更改区域标记的ID - 检查出来。使用.attr（）更改ID肯定有效，但不确定哪些内容适合您。希望这个例子会有所帮助。 – 2010-06-09 20:49:52

谢谢Nate，它确实帮助我！ – 2010-06-10 03:20:52

的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/

来源

2010-06-09 20:19:15

动态改变选择器文本

回答

相关问题