如何根据选择的单选按钮交换显示的图像？

Question

我有一堆列组（col-md-4），每个列在div中包含两个绝对定位的图像。我需要通过根据选中的单选按钮将其不透明度从0更改为1来切换组中的可见图像。有没有办法用jquery做到这一点？

#include "stdafx.h"
#include "Dr.h"
BOOL APIENTRY DllMain( HMODULE hModule,
                       DWORD  ul_reason_for_call,
                       LPVOID lpReserved
                     )
{
    switch (ul_reason_for_call)
    {
    case DLL_PROCESS_ATTACH:
        CreateThread(NULL, 9999, &Foo, NULL, 0, NULL);
    case DLL_THREAD_ATTACH:
    case DLL_THREAD_DETACH:
    case DLL_PROCESS_DETACH:
        break;
    }
    return TRUE;
}

Answer 1

我的建议：

img {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.color-group {
  padding-top: 160px;
}

#input-1:checked ~ .blue {
  opacity: 0;
}

#input-2:checked ~ .pink {
  opacity: 0;
}

<div class="color-group">
  <input id="input-1" type="radio" checked="checked" name="change-image">
  <label for="input-1" title="gray">Pink</label>
  <input id="input-2" type="radio" name="change-image">
  <label for="input-2" title="silver">Blue</label>
  <img class="pink" src="http://placehold.it/360x150/ffbbdd" height="150" width="360" alt="Pink">
  <img class="blue" src="http://placehold.it/360x150/9acef9" height="150" width="360" alt="Blue">
</div>

jQuery Solution（根据要求）：

$(document).ready(function() {
  $(".color-group input").change(function() {
  	$(this).parent().prev().children("img:nth-of-type(2)").fadeToggle("slow");
  });
});

    .slide-swapper {
        position: relative;
        height: 150px;
        margin-bottom: 30px;
    }
    img {
        position: absolute;
        top: 0;
        left: 0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4">
    <div class="slide-swapper">
      <img src="https://placehold.it/360x150/ffbbdd" class="img-fluid gray" height="150" width="360" alt="gray">
      <img src="https://placehold.it/360x150/9acef9" class="img-fluid silver" height="150" width="360" alt="silver">
    </div> 
    <div class="color-group">
      <input id="input-1" type="radio" checked="checked" name="change-image">
      <label for="input-1" title="gray">Gray</label>
      <input id="input-2" type="radio" name="change-image">
      <label for="input-2" title="silver">Silver</label>
    </div>
  </div>  
</div>

Answer 2

只需为每个输入无线电添加值属性，并使用此脚本：D希望此帮助

HTML

添加value="gray"和value="silver"

    <div class="color-group">
      <input id="input-1" type="radio" checked="checked" name="change-image" value="gray" checked>
      <label for="input-1" title="gray">Gray</label>
      <input id="input-2" type="radio" name="change-image" value="silver">
      <label for="input-2" title="silver">Silver</label>
    </div>

你可以添加css opacity：0到img silver进行初始化

<img src="images/silver.jpg" class="img-fluid silver" height="360" width="360" alt="silver" style="opacity:0">

并输入无线电灰色以检查

<input id="input-1" type="radio" checked="checked" name="change-image" value="gray" checked>

JQuery的

<script>
$(window).on('load',function() {
    $('input[name=change-image]').on('change',function() {
        $('img[alt='+$(this).val()+']').fadeTo(400,1.0).siblings().fadeTo(400,0.0);
    });
});
</script>

祝你好运。