在單選按鈕上翻轉圖像

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爲您執行圖像交換。