Как сделать обмен изображениями с переключателями, 3 изображениями и 3 состояниями? - PullRequest
Новая
       34

Как сделать обмен изображениями с переключателями, 3 изображениями и 3 состояниями?

0 голосов
/ 14 декабря 2011

У меня есть 3 изображения, которые нужно переключить на on state при нажатии каждой из 3 переключателей - и обратно, когда они не отмечены.

Достаточно просто: значение, связанное с переключателями, - этоидентификатор изображения и название изображения (без состояния).

Который я надеюсь привязать к изображению 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>

Ответы [ 3 ]

0 голосов
/ 14 декабря 2011

try 

$("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

DEMO

0 голосов
/ 14 декабря 2011

Готово!

Немного хак, но делает свою работу:

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')   
              }            
            });
0 голосов
/ 14 декабря 2011

Попробуйте использовать $ (this) .checked, $ (this) .value 

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