我有一堆列组(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>
我的建议:
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() {
$(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>
只需将值属性添加到每个输入无线电,并使用此脚本: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>
杰奎里
<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>
祝你好运。