在单选按钮上翻转图像

Question

我有一个收音机列表，其中按钮被两个图像替换。当未选中时，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 
      } 
     }); 
    }); 

Answer 1

如果你只是想打开选定的单选按钮，您可以大大简化你的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为您执行图像交换。