javascript - 使用输入 radio 显示/隐藏图像

Question

解释

我正在尝试根据输入单选按钮显示图像(并隐藏其他图像)。它在没有 label (当然，也没有它的属性)的情况下确实有效，但是在添加 label 时它不会，可能是因为 eq($(this ).index()) 与之前不同，因此它选择了不同的对象。两个代码都在下面。

代码

带有标签

$(document).ready(function() {
  $('#radioDiv .inputRadio').change(function() {
    $('.image').hide().eq($(this).index()).show();
  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioDiv">
  <input id="colorRed" class="inputRadio" type="radio" name="typeof" />
  <label for="color-1" style="color: red">Red</label>
  <input id="colorYellow" class="inputRadio" type="radio" name="typeof" />
  <label for="colorYellow" style="color: yellow">Yellow</label>
  <input id="colorGreen" class="inputRadio" type="radio" name="typeof" />
  <label for="colorGreen" style="color: green">Green</label>
</div>

<div>
  <div class="image hidden red">
    <img src="http://placehold.it/50x50">
  </div>

  <div class="image hidden yellow">
    <img src="http://placehold.it/100x100">
  </div>

  <div class="image hidden green">
    <img src="http://placehold.it/150x150">
  </div>
</div>

没有标签

$(document).ready(function() {
  $('#radioDiv .inputRadio').change(function() {
    $('.image').hide().eq($(this).index()).show();
  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioDiv">
  <input id="colorRed" class="inputRadio" type="radio" name="typeof" /> Red
  <input id="colorYellow" class="inputRadio" type="radio" name="typeof" /> Yellow
  <input id="colorGreen" class="inputRadio" type="radio" name="typeof" /> Green
</div>

<div>
  <div class="image hidden red">
    <img src="http://placehold.it/50x50">
  </div>

  <div class="image hidden yellow">
    <img src="http://placehold.it/100x100">
  </div>

  <div class="image hidden green">
    <img src="http://placehold.it/150x150">
  </div>
</div>

提前致谢，
路易斯。

Answer 1

一种方法是将 data-* 属性添加到输入 radio 以保存它们的目标图像。在下一个示例中，我使用了 data-target 属性来保存每个输入 radio 的目标图像:

$(document).ready(function()
{
    $('#radioDiv .inputRadio').change(function()
    {
        $('.image').hide();
        $($(this).data("target")).show();
  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="radioDiv">
  <input id="colorRed" class="inputRadio" type="radio" name="typeof" data-target=".red"/>
  <label for="color-1" style="color: red">Red</label>
  <input id="colorYellow" class="inputRadio" type="radio" name="typeof" data-target=".yellow"/>
  <label for="colorYellow" style="color: yellow">Yellow</label>
  <input id="colorGreen" class="inputRadio" type="radio" name="typeof" data-target=".green"/>
  <label for="colorGreen" style="color: green">Green</label>
</div>

<div>
  <div class="image hidden red">
    <img src="http://placehold.it/50x50">
  </div>

  <div class="image hidden yellow">
    <img src="http://placehold.it/100x100">
  </div>

  <div class="image hidden green">
    <img src="http://placehold.it/150x150">
  </div>
</div>