Question

我有一些带有class="block"的div（父母），在这个div中有一个链接按钮来更改图像的src。我的问题是我拥有超过10个class="block"的块，并且更改只需要应用于父级而不是所有类。

下面是一个相同HTML块的3倍的例子。我需要更改Url而不是每个块，我不想给每个块提供不同的ID或类。

<div class="block>
  <div>
    <img src="someURL" class="image" alt=""/>
  </div>

  <div class="buttonlink">
    <a class="btn" id="change" href="#" onClick="changeImage(); return false">change</a>
  </div>

</div>


<div class="block>
  <div>
    <img src="someURL" class="image" alt=""/>
  </div>

  <div class="buttonlink">
    <a class="btn" id="change" href="#" onClick="changeImage(); return false">change</a>
  </div>

</div>


<div class="block>
  <div>
    <img src="someURL" class="image" alt=""/>
  </div>

  <div class="buttonlink">
    <a class="btn" id="change" href="#" onClick="changeImage(); return false">change</a>
  </div>

</div>

使用Javascript / Jquery的

function changeImage() {

        $('.image').attr("src","../img/checkgrau.png");

}

Answer 1

在changeImage（）传递＆＃34;这个＆＃34;喜欢：

onClick="changeImage(this); return false"

然后在函数中执行：

function changeImage(element) {
    $(element).closest('.block').find('.image').attr("src","../img/checkgrau.png");

}

Answer 2

删除onclick，因为您正在使用jquery，请尝试此

$( ".block .buttonlink .btn" ).click( function(e){
  e.preventDefault(); //to prevent default action on anchor click
  $( this ).closest( ".block" ).find( "img" ).attr( "src", "../img/checkgrau.png" );
});

Answer 3

您可以使用以下jquery代码来解决您未使用的问题

$(document).ready(function(){
    $(".btn").click(function(){
        $(this).parent(".buttonlink").parent(".block").children("div").children("img").attr("src","YOUR_IMAGE_URL");
    });
});

如果您需要更多

，请检查此项

如何找到父div然后更改父级中的子项的属性？

3 个答案: