Question

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

我想要做的是，当用户点击单选按钮时，获取标签元素中包含的图像的源值，然后用它替换主产品图像。但我的代码继续返回未定义的值。我在下面的代码中尝试了几种变体，我已经尝试了jQ的最近（），find（），next（）以及prop（＆＃34; src＆＃34;）和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

或者，如果您使用的浏览器未实现labels的{{1}}属性，则可以使用：

HTMLInputElement

JS Fiddle demo

参考文献：

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

Answer 2

{p> .closest在.find向下搜索时向上搜索树。改为使用find。

Answer 3

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

Answer 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

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

4 个答案: