如何根據選擇哪個單選按鈕來交換顯示的圖像？

Question

我有一堆列組（col-md-4），每個組包含兩個絕對定位的圖像在一個div內彼此的頂部。我需要通過將其不透明度從0更改爲1（基於哪個單選按鈕被選中）來切換組中的可見圖像。有沒有辦法做到這一點與jQuery？

<div class="row"> 
    <div class="col-md-4"> 
    <div class="slide-swapper"> 
     <img src="images/gray.jpg" class="img-fluid gray" height="360" width="360" alt="gray"> 
     <img src="images/silver.jpg" class="img-fluid silver" height="360" 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> 
<style> 
    .slide-swapper { 
     position: relative; 
     height: 360px; 
     margin-bottom: 30px; 
    } 
    img { 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 
</style> 

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的解決方案（如需要）：

$(document).ready(function() { 
 
    $(".color-group input").change(function() { 
 
    \t $(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不透明度：0以IMG銀初始化

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

好運。