在jquery中遍历多个元素

Question

所以我试图遍历多个元素，但我似乎遇到了问题。我有 2 个 div，每个都有两个子元素——一个输入和一个 link。 link 里面还有一张图片。当我点击第一个 div 的输入按钮时，我希望能够遍历到它的同级（link{a 标签}）并进入 link 的子级（the img 标签）并获取其源属性，然后我将使用该属性更改第二个 div 的图像。这是代码的摘录

HTML:

<div id="item">
     <a href="#" target="_blank" id="yeezy"><img src="img/deli/1.jpg" alt="Owl Image" id="homeimage"></a>
     <input type="submit" id="btn1" class="btn btn-default dropdown-toggle viewbuttons" value="View Item" onclick='changeImage( "img/deli/1.jpg" );'>
</div>
<div class="item">
     <a href="#" target="_blank"><img src="img/deli/2.jpg" alt="Owl Image" id="homeimage"></a>
     <input type="submit" id="btn" class="btn btn-default dropdown-toggle viewbuttons" value="View Item" onclick='changeImage( "img/deli/2.jpg" );'>
</div>

JQUERY:

$(document).ready(function(e){

    $('input#btn1').on('click', function(){

        var changeThis = $('input#btn1').siblings('#yeezy').children('img').attr('src');
        $("#homeimage").attr("img", changeThis);

    })

});

提前致谢

Answer 1

ID 必须是唯一的。 ID select 或仅 select 是文档中的第一个匹配元素。你是一个元素的 getting/setting src 属性，即 $('input#btn1').siblings('#yeezy').children('img') 和 $("#homeimage") 指的是同一个元素。

使用不同的 ID 或使用 class 属性。另请注意，由于 ID 必须是唯一的，因此 $('input#btn1').siblings('#yeezy') 没有多大意义。您可以简单地 select 使用 ID select 的元素或：$('#yeezy');

Answer 2

您的代码有一些问题。您使用了 id "homeimage" 两次，但应该只有一个给定的 id。您已将 onclick 属性设置为除您想要运行之外的其他功能，因此您应该删除它们。最后，当您尝试更改 homeimage 的 src 属性时，您调用了 img 属性上的函数：("img", changeThis);

确保您的所有 ID 都是唯一的，从您的元素中删除任何点击属性，然后替换：

$("#homeimage").attr("img", changeThis);

与：

$('#homeimage').attr('src', changeThis);

在jquery中遍历多个元素

Traversing in jquery through multiple elements

html

javascript

jquery

jquery-traversing