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

Question

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

我想做的是，当用户单击单选按钮时，获取标签元素中包含的图像的源值，然后用它替换主产品图像。但我的代码不断返回未定义的值。我已经尝试了下面代码的几种变体，我尝试了jQ的closest()、find()、next()以及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>

Answer 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() .