我有一个单选列表，其中的按钮已被两个图像取代。取消选中时，imgFront 可见，选中时，imgBack 可见。目的是使用 CSS 变换翻转图像以显示检查中的另一个图像。这将如何完成？
HTML:
<div class="switch">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-yes-no" value="1" type="radio" name="category" />
<label id="Label1" for="cmn-toggle-1">
<img id="imgFront1" src="~/Content/img/Categories/Refuse.png" width="65" height="65"/>
<img id="imgBack1" src="~/Content/img/Categories/RefuseLabel.png" width="65" height="65" class="hidden"/>
</label>
</div>
<div class="switch">
<input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-yes-no" value="2" type="radio" name="category" />
<label id="Label2" for="cmn-toggle-2">
<img id="imgFront2" src="~/Content/img/Categories/Water.png" width="65" height="65"/>
<img id="imgBack2" src="~/Content/img/Categories/WaterLabel.png" width="65" height="65" class="hidden"/>
</label>
</div>
<div class="switch">
<input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-yes-no" value="3" type="radio" name="category" />
<label id="Label3" for="cmn-toggle-3">
<img id="imgFront3" src="~/Content/img/Categories/Building.png" width="65" height="65"/>
<img id="imgBack3" src="~/Content/img/Categories/BuildingLabel.png" width="65" height="65" class="hidden"/>
</label>
</div>
CSS:
/* ============================================================
COMMON
============================================================ */
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* ============================================================
SWITCH 3 - YES NO
============================================================ */
input.cmn-toggle-yes-no + label {
padding: 2px;
width: 120px;
height: 60px;
}
input.cmn-toggle-yes-no + label::before, input.cmn-toggle-yes-no + label::after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: #fff;
font-family: "Roboto Slab", serif;
font-size: 20px;
text-align: center;
line-height: 60px;
}
input.cmn-toggle-yes-no + label::before {
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
input.cmn-toggle-yes-no + label::after {
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
input.cmn-toggle-yes-no:checked + label::before {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked + label::after {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
JS:
$(document).ready(function() {
$('input[name=category]:radio').change(function() {
if(this.checked==true){
//do something
}
else{
//doo something else
}
});
});
最佳答案
如果您只想切换所选单选按钮上的图像，您可以大大简化您的 CSS。
在您的 HTML 中，将 label > img 标签上的所有 id 属性更改为 class="imgFront" 和 class ="imgBack" 像这样:
<div class="switch">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-yes-no" value="1" type="radio" name="category" />
<label id="Label1" for="cmn-toggle-1">
<img class="imgFront" src="~/Content/img/Categories/Refuse.png" width="65" height="65"/>
<img class="imgBack" src="~/Content/img/Categories/RefuseLabel.png" width="65" height="65"/>
</label>
</div>
<div class="switch">
<input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-yes-no" value="2" type="radio" name="category" />
<label id="Label2" for="cmn-toggle-2">
<img class="imgFront" src="~/Content/img/Categories/Water.png" width="65" height="65"/>
<img class="imgBack" src="~/Content/img/Categories/WaterLabel.png" width="65" height="65"/>
</label>
</div>
<div class="switch">
<input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-yes-no" value="3" type="radio" name="category" />
<label id="Label3" for="cmn-toggle-3">
<img class="imgFront" src="~/Content/img/Categories/Building.png" width="65" height="65"/>
<img class="imgBack" src="~/Content/img/Categories/BuildingLabel.png" width="65" height="65"/>
</label>
</div>
您还可以将 class="hidden" 放在“背面”图像上。除非在不同的 CSS 中定义和需要该类，否则它不会真正在此处使用。
在您的 CSS 中，保留 COMMON 部分并删除其他所有内容。三个简单的 CSS 规则将处理图像翻转。您的 CSS 应该如下所示:
/* ============================================================
COMMON
============================================================ */
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* ============================================================
RADIO BUTTON IMAGE FLIPPING WHEN SELECTED
============================================================ */
.switch > label > .imgBack {
display: none;
}
.switch > input[type='radio']:checked + label > .imgFront {
display: none;
}
.switch > input[type='radio']:checked + label > .imgBack {
display: block;
}
您的 JavaScript 没有问题，尽管这里不需要图像翻转。如果您需要在选择其中一个单选按钮时处理其他事件，请保留它，否则您可以摆脱它。
应该可以了。如果你想用 CSS 添加更多花哨的过渡，你当然可以这样做。此解决方案将仅使用纯 CSS 为您执行图像交换。
关于jquery - 在单选按钮更改时翻转图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39370149/