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

时间:2017-10-18 12:35:23

标签: javascript jquery html

我有一些带有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");

}

3 个答案:

答案 0 :(得分:1)

在changeImage()传递&#34;这个&#34;喜欢:

onClick="changeImage(this); return false"

然后在函数中执行:

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

}

答案 1 :(得分:1)

删除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" );
});

答案 2 :(得分:0)

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

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

如果您需要更多

,请检查此项