将 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

这是非常基本的：在类上选择项目（例如.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'));

到函数结束。

这是带有更新代码的完整 sn-p：

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 2

你在一个字符串中获取元素的属性，而你不得不选择它作为元素的方法。

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 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">