我有一些带有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");
}
答案 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");
});
});
如果您需要更多
,请检查此项