使用 jQuery，当单击最近的单选按钮时，尝试检索图像 src 值答案

【问题标题】：Using jQuery, trying to retrieve an image src value, when a nearest radio button is clicked on使用 jQuery，当单击最近的单选按钮时，尝试检索图像 src 值
【发布时间】：2023-03-09 01:29:01
【问题描述】：

我有一个包含许多 div 的页面，如下所示，它是一个颜色样本页面，即拇指大小的图像。

我要做的是，当用户单击单选按钮时，获取标签元素中包含的图像的源值，然后用它替换主要产品图像。但我的代码不断返回未定义的值。我尝试了以下代码的几种变体，我尝试了 jQ 的最接近（）、查找（）、下一个（）以及 prop（“src”）和 attr（）。

('.swatches-radio-btn').each(function(){
$(this).click(function(){
    var currImg = $(this).closest('label img').prop( "src" ); //not working
    alert(currImg); //returns undefined
    $('#productMainImage img').prop('src', currImg);
})
})

标记是这样的，

<div id="productMainImage">
<img src="images/PP_watercress87.jpg" alt="Pepper Pot Silk" />
</div>

<div class="threads-swatch-wrapper">
<input type="radio" name="id[10]" value="129" id="attrib-10-129" class="swatches-radio-btn" />
<label class="attribsRadioButton thread-opts" for="attrib-10-129">Artichoke <br />
    <img src="images/attributes/PP_artichoke77.jpg" alt="" width="260" height="320" />
</label>
</div>

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

我建议：

$('input[type="radio"]').change(function(){
    var currImg = $(this.labels[0]).find('img').prop('src');
    $('#productMainImage img').prop('src', currImg);
});

JS Fiddle demo.

或者，如果您使用的浏览器没有实现HTMLInputElement 的labels 属性，您可以改用：

$('input[type="radio"]').change(function(){
    var currImg = $(this).closest('div').find('label img').prop('src');
    $('#productMainImage img').prop('src', currImg);
});

JS Fiddle demo.

参考资料：

JavaScript：
- labels (in the HTMLInputElement reference)。
jQuery:
- change()。
- find()。
- prop()。

【讨论】：

是的，我在 IE 上试了一下，第一个不行，但第二个可以，非常感谢

【解决方案2】：

.closest 向上搜索树，而.find 向下搜索。请改用 find。

【讨论】：

【解决方案3】：

这可能有效：var currImg = $(this).next('label').children('img').prop( "src" );

【讨论】：

【解决方案4】：

你可以用这个 -

$('.swatches-radio-btn').click(function(){
   var currImg = $(this).next().find('img').attr('src');
   $('#productMainImage img').attr('src', currImg);
});

工作演示 - http://codepen.io/nitishdhar/pen/xsdIj

【讨论】：

@TopTomato 很高兴我能提供帮助。您可以接受一个但仍然对您认为效果不错的多个答案进行投票。