如何使用单选按钮、3 个图像和 3 个状态进行图像交换？

Question

我有 3 个图像，当单击 3 个单选按钮中的每一个时，需要切换到打开状态 - 并在未选中它们时返回。

足够简单： 与单选按钮关联的值是图像的 id 和图像的名称（减去 state ）。

我希望在单击按钮时将其与图像 src 绑定。
我该如何让它发挥作用？

$(document).ready(function() {

     $(".challengeradio").change(function(){
          if(this.checked){  
             $("#" + this.value +".pic").attr("src").replace("_off", "_on");     
                          }     
                   });     
          });

~~~以及所请求的XHTML~

 <div id="chooseChallenge">
    <h2> Choose a Challenge </h2>
    <div class="badge" id="weightLossChallenge"> 
    <div class="challengelabel" id="chall_weightloss">
    <input type="radio" value="chall_weightloss" name="challenge" class="challengeradio">
   <strong> the big <br>Thang</strong>
    </div>
    <img border="0" src="http://www.yoozit.net/zone/images/chall_weightloss_on.png" id="chall_weightloss" class="pic"> </div>

    <div class="badge" id="activityChallenge">
     <div class="challengelabel" id="chall_activity">
    <input type="radio" value="chall_activity" name="challenge" class="challengeradio">
    <strong> Activity Tracker<br>Thang</strong>
    </div> <img border="0" src="http://www.yoozit.net/zone/images/chall_activity_off.png" id="chall_activity" class="pic"></div>

    <div class="badge" id="basicChallenge"> 
    <div class="challengelabel" id="chall_basic">
    <input type="radio" value="chall_basic" name="challenge" class="challengeradio">
    <strong>Basic Standard <br>Thang</strong>
    </div>
    <img border="0" src="http://www.yoozit.net/zone/images/chall_basic_off.png" id="chall_basic" class="pic"></div>
  </div>

Answer 1

尝试使用 $(this).checked, $(this).value

$(".challengeradio").click(function() {
    $("#" + $(this).val() +".pic").attr("src").replace("_off", "_on");   
});

Answer 2

尝试

$("img.addToFavourite").live('click', function() {
    if ($(this).attr("class") == "addToFavourite") {
      this.src = this.src.replace("_off","_on");
      this.title="Remove from favourite"
    } else {
      this.src = this.src.replace("_on","_off");
      this.title="Add to favourite"
    }
    $(this).toggleClass("on");
  });

有两个名为 favourite_off.png 和 favourite_on.png 的图像

演示

Answer 3

完毕！

有点 hacky，但可以完成工作：

http://jsfiddle.net/2Sy2h/26/

代码：

  $(".challengeradio").change(function(){

           if ($(this).prop("checked")) {
          previous = $('img.onlive').first();
          previnput = $('input.onlive').first();

          var preimgsrc = {};
          preimgsrc['src'] = "http://www.yoozit.net/zone/images/"+ previnput.attr('value') + "_off.png" ;
          previous.attr(preimgsrc).removeClass('onlive');
          previnput.removeClass('onlive');
          var imgsrc = {};
          imgsrc['src'] = "http://www.yoozit.net/zone/images/"+ this.value + "_on.png" ;  


          $("#" + this.value +".pic").attr(imgsrc).addClass('onlive');
          $(this).addClass('onlive')   
              }            
            });