Question

这是一个难以言喻的问题我甚至不知道从哪里开始解释，但是对你来说代码是正确的

这有效

<div>
    <div>
        <img src='' class='myImage'/>
    </div>
    <div>
        <button class='btn' src='hello.png'>Hello</button>
        <button class='btn' src='hi.png'>Hi</button>
    </div>
</div>

Jquery的

$('.btn').click(function (){
    $('.myImage').attr('src', $(this).attr('src'));
});

现在如果我有多个图像

<div>
    <div>
        <img src='' class='myImage'/>
    </div>
    <div>
        <button class='btn' src='hello.png'>Hello</button>
        <button class='btn' src='hi.png'>Hi</button>
    </div>
</div>

<div>
    <div>
        <img src='' class='myImage'/>
    </div>
    <div>
        <button class='btn' src='hello.png'>Hello</button>
        <button class='btn' src='hi.png'>Hi</button>
    </div>
</div>

我不能在这里工作，导致使用动态数据库和PHP绘制div。有没有办法我可以获得点击的btn事件只改变其父母的来源myImage

Answer 1

我会使用其他选择器来确保您获得正确的img.myImage。

可能会有效：

$('.btn').click(function (e){
    var $this = $(this); //small performance gain
    $this.closest('img.myImage').attr('src', $this.attr('src'));
});

值得注意的是.closest仅适用于jQuery 1.3或更高版本。

Answer 2

$('.btn').click(function (){
  var btn = $(this);
  btn.parent().prev().children().attr('src', btn.attr('src'));
});

这样你就可以到达父div，然后到达前一个div（有两个），最后到达前一个div的孩子。

Answer 3

最直接的方法是使用JQuery parent()方法，您可以找到文档here。如果你的HTML结构是不变的，你可以走两个这样的元素：

$('.btn').click(function() {
    $(this).parent().prev().children('img').attr('src', $(this).attr('src'));
});

..或者，如果您想要更动态的内容，可以在每个父div上添加一个类名或ID，并使用文档中的parent(selector)变体。

Answer 4

我会使用index()和eq。如果每个.myImage有一个.btn，则图像3相对于按钮3，图像666相对于按钮666，依此类推。

$('.btn').click(function (){
    var id = $('.btn').index(this);
    $('.myImage').eq(id).attr('src', $(this).attr('src'));
});

jQuery由特定按钮控制的多个类元素

4 个答案: