Как поменять отображаемое изображение на основе выбранного переключателя?

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> 

удачи.