Question

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

有3个单选按钮，还有3个div，每个按钮都包含一个img标签。
单击任何单选按钮，其他2个div都将被隐藏。
选择任何单选按钮后，因为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>元素），然后阅读{{1 }}属性。完成！

您需要更改此行：

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
}

Answer 3

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

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

  <div id = t1>
   <table></table>
   <tr>...</tr>
   <tr>...</tr>
   .
   .
   .
 </div>

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
}

将img的值分配给value属性

3 个答案: