jquery:如何处理指定html元素区域中的元素？
jquery:如何处理指定html元素区域中的元素？
提问于 2018-06-20 21:05:13
如何仅为指定的img设置img.src？select和目标div必须具有相同的父img。
$(".selector").change(function() {
$(".target_image").attr("src", $(".selector").val())
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select class="selector">
<option value='src1'>1</option>
<option value='src2'>2</option>
</select>
<img class='target_image' src='' \>
</div>
<div>
<select class="selector">
<option value='src3'>1</option>
<option value='src4'>2</option>
</select>
<img class='target_image' src='' \>
</div>
回答 3
Stack Overflow用户
发布于 2018-06-20 21:10:43
您可以使用DOM遍历来查找从调用事件的元素开始的目标元素。例如：
$(".selector").change(function(){
$(this).closest("div").find(".target_image").attr("src", $(this).val());
});这从this开始，它是引发change事件的.selector实例，导航到最接近的父div，然后在该div中搜索匹配的.target_image元素(其中有一个)。然后，它将该元素上的src属性设置为引发事件的.selector的值。
请注意，任何jQuery DOM导航，无论是向上遍历然后向下遍历，还是跨兄弟元素遍历，如果DOM结构发生变化，都会受到破坏。您可以决定哪些更改比其他更改更有可能或更不可能。
Stack Overflow用户
发布于 2018-06-20 21:12:23
使用siblings函数选择当前所选元素的同级图像，使用$(this).val()获取当前所选元素的值
$(".selector").change(function(){
$(this).siblings(".target_image").attr("src",$(this).val())
});Stack Overflow用户
发布于 2018-06-20 21:07:48
在您的示例中，以下代码将起作用。因为在本例中，image是.selector的下一个元素，所以可以通过next()方法遍历它。您可以阅读有关jQuery的next()方法here的更多信息。
$(".selector").change(function(){
$(this).next("#target_image").attr("src",$(this).val())
});或者：
$(".selector").change(function(){
$(this).parent().find("#target_image").attr("src",$(this).val())
});jQuery parent()方法选择元素的父元素，并且只在DOM树中向上移动一层，然后我们就可以在其中找到image。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50948975
复制相关文章
相似问题