使用输入广播显示/隐藏图像

Question

说明

我正在尝试根据输入单选显示图像（并隐藏其他图像）。如果没有label（当然也没有它的属性），它就可以工作，但是添加label时它就不会工作，可能是因为eq($(this).index())与以前不一样，所以它选择一个不同的对象。这两个代码都在下面。

代码

与label

$(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>

没有label

$(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

您可以将label包裹在input周围，其结果将是相同的，而无需更改索引。

您还需要稍微调整JS，以便它使用label而不是input的索引。

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

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioDiv">
  <label style="color: red"><input class="inputRadio" type="radio" name="typeof" /> Red</label>
  <label style="color: yellow"><input class="inputRadio" type="radio" name="typeof" /> Yellow</label>
  <label style="color: green"><input class="inputRadio" type="radio" name="typeof" /> 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>

Answer 2

一种方法可能是向输入无线电添加data-*属性以将其保存为目标图像。在下一个示例中，我使用data-target属性保存每个输入广播的目标图像：

$(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>