将img的值分配给value属性

Question

我正在努力实现这一目标：

1. 有3个单选按钮，还有3个div，每个按钮都包含一个img标签。
2. 单击任何单选按钮时，其他2 div将被隐藏。
3. 选择任何单选按钮后，由于可见1 div。 我只需要从该div中获取img src并将其应用于id为“ testing”的输入元素的值（属性）。

这是我的代码：

 var radOne = $('#graphic-one-name'), radTwo = $('#graphic-two-name'), radThree = $('#graphic-three-name'), radParent = $('#testing'); radOne.on('change', function() { $('.two, .three').hide(); $('.one').show(); radParent.attr("value", ".one.attr('src')"); }); radTwo.on('change', function() { $('.one, .three').hide(); $('.two').show(); }); radThree.on('change', function() { $('.two, .one').hide(); $('.three').show(); }); 

 .one, .two, .three { width: 100px; height: 100px; border: 1px solid black; background-image: url('http://via.placeholder.com/100x100'); } .two { background: #023432 } .three { background: red } .one { background: #fff } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="graphics-select"> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-one-name" value="' . $mono_gram_font_graphic_1_sku . '" /> <label for="graphic-one-name"><img class="image-one-graphics" alt="" height="auto" width="auto" />One</label> </div> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-two-name" value="' . $mono_gram_font_graphic_2_sku .'" /> <label for="graphic-two-name"><img class="image-two-graphics" alt="" height="auto" width="auto" />Two</label> </div> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-three-name" value="' . $mono_gram_font_graphic_3_sku .'" /> <label for="graphic-three-name"><img class="image-three-graphics" alt="" height="auto" width="auto" />Three</label> </div> <div class="parent"> <div class="one"> <img src="http://via.placeholder.com/100x100"> </div> <div class="two"> <img src="http://via.placeholder.com/100x100"> </div> <div class="three"> <img src="http://via.placeholder.com/100x100"> </div> </div> <input type="text" id="testing" value="test" class="imagerep"> 

Answer 1

您必须在字符串中获取元素的属性，而必须将其选择为元素上的方法。

 var radOne = $('#graphic-one-name'), radTwo = $('#graphic-two-name'), radThree = $('#graphic-three-name'), radParent = $('#testing'); radOne.on('change', function() { $('.two, .three').hide(); $('.one').show(); radParent.attr("value", $(".one").children(':first').attr('src')); }); radTwo.on('change', function() { $('.one, .three').hide(); $('.two').show(); radParent.attr("value", $(".two").children(':first').attr('src')); }); radThree.on('change', function() { $('.two, .one').hide(); $('.three').show(); radParent.attr("value", $(".three").children(':first').attr('src')); }); 

 .one, .two, .three { width: 100px; height: 100px; border: 1px solid black; } .two { background: #023432 } .three { background: red } .one { background: #fff } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="graphics-select"> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-one-name" value="' . $mono_gram_font_graphic_1_sku . '" /> <label for="graphic-one-name"><img class="image-one-graphics" alt="" height="auto" width="auto" />One</label> </div> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-two-name" value="' . $mono_gram_font_graphic_2_sku .'" /> <label for="graphic-two-name"><img class="image-two-graphics" alt="" height="auto" width="auto" />Two</label> </div> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-three-name" value="' . $mono_gram_font_graphic_3_sku .'" /> <label for="graphic-three-name"><img class="image-three-graphics" alt="" height="auto" width="auto" />Three</label> </div> <div class="parent"> <div class="one"> <img src="abc.jpg"> </div> <div class="two"> <img src="xyz.jpg"> </div> <div class="three"> <img src="ghk.jpg"> </div> </div> <input type="text" id="testing" value="test" class="imagerep"> 

Answer 2

这很基本：在类上选择项目（例如.one ），然后选择第一个子元素（在这种情况下为<img>元素），然后读取src属性。 做完了！

您需要更改此行：

radParent.attr("value", ".one.attr('src')");

对此：

radParent.attr("value", $($(".one").children()[0]).attr('src'));

对于其他两个功能，添加

radParent.attr("value", $($(".two").children()[0]).attr('src'));

分别

radParent.attr("value", $($(".three").children()[0]).attr('src'));

到功能的末尾。

这是带有更新代码的完整代码段：

 var radOne = $('#graphic-one-name'), radTwo = $('#graphic-two-name'), radThree = $('#graphic-three-name'), radParent = $('#testing'); radOne.on('change', function() { $('.two, .three').hide(); $('.one').show(); radParent.attr("value", $($(".one").children()[0]).attr('src')); }); radTwo.on('change', function() { $('.one, .three').hide(); $('.two').show(); radParent.attr("value", $($(".two").children()[0]).attr('src')); }); radThree.on('change', function() { $('.two, .one').hide(); $('.three').show(); radParent.attr("value", $($(".three").children()[0]).attr('src')); }); 

 .one, .two, .three { width: 100px; height: 100px; border: 1px solid black; } .two { background: #023432 } .three { background: red } .one { background: #fff } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="graphics-select"> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-one-name" value="' . $mono_gram_font_graphic_1_sku . '" /> <label for="graphic-one-name"><img class="image-one-graphics" alt="" height="auto" width="auto" />One</label> </div> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-two-name" value="' . $mono_gram_font_graphic_2_sku .'" /> <label for="graphic-two-name"><img class="image-two-graphics" alt="" height="auto" width="auto" />Two</label> </div> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-three-name" value="' . $mono_gram_font_graphic_3_sku .'" /> <label for="graphic-three-name"><img class="image-three-graphics" alt="" height="auto" width="auto" />Three</label> </div> <div class="parent"> <div class="one"> <img src="abc.jpg"> </div> <div class="two"> <img src="xyz.jpg"> </div> <div class="three"> <img src="ghk.jpg"> </div> </div> <input type="text" id="testing" value="test" class="imagerep"> 

Answer 3

我将使它更通用-使用类，这样您不必分别绑定到每个无线电。

我在下面评论了代码，让您了解发生了什么

 var radios = $('.graph-init'), // radio buttons testing = $('#testing'), divs = $('.parent').children(); // image divs radios.on('change', function() { // bind to all radio inputs if (this.checked) { // only do this if the radio is checked divs.hide(); // hide image divs var index = radios.index($(this)); // get the index of the current radio var div = divs.eq(index); // get corresponding div - assumes divs are in same order as radios and equal number of divs div.show(); // show div var imageSource = div.children('img').attr('src'); // get image source - assumes only one image per and image is direct child of div div testing.val(imageSource); // set testing value } }); 

 .one, .two, .three { width: 100px; height: 100px; border: 1px solid black; } .two { background: #023432 } .three { background: red } .one { background: #fff } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="graphics-select"> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-one-name" value="' . $mono_gram_font_graphic_1_sku . '" /> <label for="graphic-one-name"><img class="image-one-graphics" alt="" height="auto" width="auto" />One</label> </div> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-two-name" value="' . $mono_gram_font_graphic_2_sku .'" /> <label for="graphic-two-name"><img class="image-two-graphics" alt="" height="auto" width="auto" />Two</label> </div> <div> <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-three-name" value="' . $mono_gram_font_graphic_3_sku .'" /> <label for="graphic-three-name"><img class="image-three-graphics" alt="" height="auto" width="auto" />Three</label> </div> <div class="parent"> <div class="one"> <img src="abc.jpg"> </div> <div class="two"> <img src="xyz.jpg"> </div> <div class="three"> <img src="ghk.jpg"> </div> </div> <input type="text" id="testing" value="test" class="imagerep">