jQuery：为每个单选按钮分配一个缩略图SRC，然后使用它

Question

我有一张主图和一些缩略图，然后是一些单选按钮。

我想单击单选按钮，按顺序为其分配一个缩略图的 SRC，并更改主图像的 SRC。

这就是我到目前为止所尝试的方法，但它只改变了一次（并且它改变了最后一个缩略图的 SRC 的主图像，无论我点击哪个单选按钮）。

我是一个相当笨拙的编码员（虽然是幸存者），很抱歉造成这个混乱，只是想解决它！

 jQuery(".thumbnails-group img").each(function() {  //I go through the thumbnails
 
  var imgsrc = this.src; //I get the SRC of each
  
  jQuery(".radio-buttons input:radio").each(function() {  //for each radio button

   jQuery(this).click(function () { //on click
    jQuery('#main-image').attr('src', imgsrc); //change main image SRC using variable
   });

  });
  
 });

.thumbnails-group{
  clear: both;
}
.thumbnails-group ul li{
  list-style-type: none;
  float: left;
  margin-right: 10px;
}
.thumbnails-group img{
  width: 90px;
  height: 90px;
}

.radio-buttons{
  clear: both;
  padding: 20px;
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="main-image" src="http://www.daz3d.com/media/catalog/product/cache/1/thumbnail/689303033aebc8cae535000c73c8db4b/h/e/heart-of-the-forest-1.jpg">

<div class="thumbnails-group">
 <ul>
  <li><img src="http://rs177.pbsrc.com/albums/w208/layla818/Forest.jpg~c200"></li>
  <li><img src="http://www.iiasa.ac.at/GenticsImageStore/200/auto/prop//web/home/research/researchPrograms/EcosystemsServicesandManagement/dreamstime_l_14610380_2.png"></li>
  <li><img src="http://rs1382.pbsrc.com/albums/ah245/PhotobucketMKTG/LOHP/Forests.jpg~c200"></li>
 </ul>
</div>

<div class="radio-buttons">
 <p>Click those (not the thumbs, but the radio buttons):</p>
 <input type='radio' id='radio_1' name='type' value='1' />
 <input type='radio' id='radio_2' name='type' value='2' />
 <input type='radio' id='radio_3' name='type' value='3' /> 
</div>

Answer 1

您可以获得 checked 单选按钮的索引，然后 index 可用于获取相应索引处的 img 元素。

var radios = jQuery(".radio-buttons input:radio");
radios.change(function() {
  if (this.checked) {
    var index = radios.index(this);

    imgsrc = jQuery(".thumbnails-group img").eq(index).attr('src');
    //change main image SRC using variable
    jQuery('#main-image').attr('src', imgsrc);
  }
});

.thumbnails-group {
  clear: both;
}
.thumbnails-group ul li {
  list-style-type: none;
  float: left;
  margin-right: 10px;
}
.thumbnails-group img {
  width: 90px;
  height: 90px;
}
.radio-buttons {
  clear: both;
  padding: 20px;
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="main-image" src="http://www.daz3d.com/media/catalog/product/cache/1/thumbnail/689303033aebc8cae535000c73c8db4b/h/e/heart-of-the-forest-1.jpg">

<div class="thumbnails-group">
  <ul>
    <li>
      <img src="http://rs177.pbsrc.com/albums/w208/layla818/Forest.jpg~c200">
    </li>
    <li>
      <img src="http://www.iiasa.ac.at/GenticsImageStore/200/auto/prop//web/home/research/researchPrograms/EcosystemsServicesandManagement/dreamstime_l_14610380_2.png">
    </li>
    <li>
      <img src="http://rs1382.pbsrc.com/albums/ah245/PhotobucketMKTG/LOHP/Forests.jpg~c200">
    </li>
  </ul>
</div>

<div class="radio-buttons">
  <p>Click those (not the thumbs, but the radio buttons):</p>
  <input type='radio' id='radio_1' name='type' value='1' />
  <input type='radio' id='radio_2' name='type' value='2' />
  <input type='radio' id='radio_3' name='type' value='3' />
</div>

Answer 2

当您可以使用唯一 ID 专门访问图像时，为什么要循环访问图像？

在下面的示例中，我使用单选按钮的 value 构建一个 ID 来访问图像 - 所有图像都已分配一个 ID。

jQuery(".radio-buttons input:radio").each(function() { //for each radio button

  jQuery(this).click(function() { //on click
    var id = $(this).attr("value");
    var imgsrc = $("#img_" + id).attr("src");
    jQuery('#main-image').attr('src', imgsrc); //change main image SRC using variable
  });

});

.thumbnails-group {
  clear: both;
}
.thumbnails-group ul li {
  list-style-type: none;
  float: left;
  margin-right: 10px;
}
.thumbnails-group img {
  width: 90px;
  height: 90px;
}
.radio-buttons {
  clear: both;
  padding: 20px;
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="main-image" src="http://www.daz3d.com/media/catalog/product/cache/1/thumbnail/689303033aebc8cae535000c73c8db4b/h/e/heart-of-the-forest-1.jpg">

<div class="thumbnails-group">
  <ul>
    <li>
      <img id="img_1" src="http://rs177.pbsrc.com/albums/w208/layla818/Forest.jpg~c200">
    </li>
    <li>
      <img id="img_2" src="http://www.iiasa.ac.at/GenticsImageStore/200/auto/prop//web/home/research/researchPrograms/EcosystemsServicesandManagement/dreamstime_l_14610380_2.png">
    </li>
    <li>
      <img id="img_3" src="http://rs1382.pbsrc.com/albums/ah245/PhotobucketMKTG/LOHP/Forests.jpg~c200">
    </li>
  </ul>
</div>

<div class="radio-buttons">
  <p>Click those (not the thumbs, but the radio buttons):</p>
  <input type='radio' id='radio_1' name='type' value='1' />
  <input type='radio' id='radio_2' name='type' value='2' />
  <input type='radio' id='radio_3' name='type' value='3' />
</div>

Answer 3

你可以这样做：

jQuery('.radio-buttons').change(function () { //on change instead
    var idx = jQuery(this).index()
    var imgsrc = jQuery('.thumbnails-group img').eq(idx).attr('src');
    jQuery('#main-image').attr('src', imgsrc);
});

Answer 4

请看一下这个方法：

$(document).ready(function() {

  jQuery(".radio-buttons input:radio").click(function() {
    var currentVal = $(this).val();
    currentVal = parseInt(currentVal) - 1;
    var targetLI = $(".thumbnails-group ul li").eq(currentVal);
    var src = targetLI.find("img").attr("src");

    jQuery('#main-image').attr('src', src);


  });

});

.thumbnails-group {
  clear: both;
}
.thumbnails-group ul li {
  list-style-type: none;
  float: left;
  margin-right: 10px;
}
.thumbnails-group img {
  width: 90px;
  height: 90px;
}
.radio-buttons {
  clear: both;
  padding: 20px;
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="main-image" src="http://www.daz3d.com/media/catalog/product/cache/1/thumbnail/689303033aebc8cae535000c73c8db4b/h/e/heart-of-the-forest-1.jpg">

<div class="thumbnails-group">
  <ul>
    <li>
      <img src="http://rs177.pbsrc.com/albums/w208/layla818/Forest.jpg~c200">
    </li>
    <li>
      <img src="http://www.iiasa.ac.at/GenticsImageStore/200/auto/prop//web/home/research/researchPrograms/EcosystemsServicesandManagement/dreamstime_l_14610380_2.png">
    </li>
    <li>
      <img src="http://rs1382.pbsrc.com/albums/ah245/PhotobucketMKTG/LOHP/Forests.jpg~c200">
    </li>
  </ul>
</div>

<div class="radio-buttons">
  <p>Click those (not the thumbs, but the radio buttons):</p>
  <input type='radio' id='radio_1' name='type' value='1' />
  <input type='radio' id='radio_2' name='type' value='2' />
  <input type='radio' id='radio_3' name='type' value='3' />
</div>

jQuery：为每个单选按钮分配一个缩略图SRC，然后使用它

jQuery: for each radio button, assign a thumbnail SRC, then use it

each

jquery

thumbnails

src

radio