翻转图像单选按钮更改

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为您执行图像交换。