在jQuery中访问同一个ID的多个元素 [英] Access Multiple Elements of same ID in jQuery

问题描述

如果我有这样的元素

 < img src ='0.jpg'id ='images'/ > 
< img src ='...'id ='myEle'/> 
< img src ='...'id ='myEle'/> 
  

在jQuery中，我可以做这样的事情

< pre $ $（document）.ready（function（）{
$（'＃myEle'）。mouseup（function（）{

$（ '#images'）。attr（src，myEle.getNumber（）+.jpg）;
}
}


很显然，每个元素都按照与 myEle 数组编号对应的正确数字格式排序

解决方案

不要创建包含具有重复ID的元素的标记。这会破坏事情，并且您将对速龙骑兵造成的伤害比你可以说的要快得多goto 。

改为使用类：

 < img src ='0.jpg'id ='images'/> 
< img src ='...'class ='myEle'/> 
< img src ='... 'class ='myEle'/> 
  

then ...

  $（document）.ready（function（）{
 $（'。myEle'）。live （'mouseup'，function（）{
 
 $（'＃images'）。attr（src，myEle.getNumber（）+.jpg）; 
}）; 
}）; 
  

---

回复：评论

我如何知道哪个图片被按下？

使用 关键字：

  $（document）.ready（function（）{
 $ （'.myEle'）。live（'mouseup'，function（）{
 
 $（'＃images'）。attr（src，$（this）.attr（'src'） ）; 
}）; 
}）; 
  

...我想这就是您要找的。

If i have elements such as this

<img src='0.jpg' id='images' />
<img src='...' id='myEle' />
<img src='...' id='myEle' />

in jQuery can i do something like this

$(document).ready(function() {
    $('#myEle').mouseup(function () {

        $('#images').attr("src", myEle.getNumber() + ".jpg"); 
    }
}

Obviously each element is sorted in the correct number format that corresponds to the myEle array number

解决方案

Do not create markup that contains elements with duplicate IDs. This will break things, and you will be mauled by a velociraptor faster than you can say "goto".

Use classes instead:

<img src='0.jpg' id='images' />
<img src='...' class='myEle' />
<img src='...' class='myEle' />

then...

$(document).ready(function() {
    $('.myEle').live('mouseup', function () {

        $('#images').attr("src", myEle.getNumber() + ".jpg"); 
    });
});

---

Re: OP comment

"How do i know which image is pressed?"

Use the this keyword:

$(document).ready(function() {
    $('.myEle').live('mouseup', function () {

        $('#images').attr("src", $(this).attr('src')); 
    });
});

...I think that's what you're looking for.

这篇关于在jQuery中访问同一个ID的多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！