2010-06-07 4 views
1

У меня есть ситуация, когда я не понимаю Toggle jQuery.jQuery Изображение тумблера

У меня есть две кнопки, обе из них открывают один и тот же контент, и когда вы нажимаете на любую кнопку, содержимое должно открываться или закрываться, а атрибут меняет кнопку от открытого до закрытого. (Таким образом, обе кнопки выполняют ту же функцию).

Единственное, когда я нажимаю на верхнюю кнопку, и открывает мое содержимое, а затем нажимает на нижнюю кнопку, чтобы закрыть его, атрибуты изображения переключаются неправильно.

Вот очень урезанная версия того, как выглядит мой код, и я был бы признателен за помощь.

<script language="javascript" type="text/javascript"> 
    $(function() { 

     var open = false; 

     $("#button1, #button2").toggle(
      function() { 
       open = true; 
       $("#button1").attr("src", "images/btn-open.gif"); 
       $("#button2").attr("src", "images/btn-open.gif"); 
      }, 
      function() { 
       if (open) { 
        $("#button1").attr("src", "images/btn-closed.gif"); 
        $("#button2").attr("src", "images/btn-closed.gif"); 

       } else { 
        $("#button1").attr("src", "images/btn-open.gif"); 
        $("#button2").attr("src", "images/btn-open.gif"); 

       } 
       open = false; 

      } 
     ); 


    }); 
</script> 

<img id="button1" src="images/btn-open.gif"></img> 
<br /> 
<br /> 
<br /> 
<br /> 
<img id="button2" src="images/btn-open.gif"></img> 

ответ

3

.toggle() будет цикл между n (обычно 2, но не ограничиваясь этим, 2) при условии функции на каждый клик на элемент, но вы хотите, один переключатель для обеих кнопок, а не каждый один переключая indepdently , так что чек и использовать .click(), что-то вроде этого:

var open = false; 
$("#button1, #button2").click(function() { 
    open = !open; //toggle it 
    $("#button1, #button2") //set the src based on the new state 
    .attr("src", "images/btn-" + (open ? "open" : "closed") + ".gif"); 
}); 

Я также combined your selectors, чтобы сделать его немного аккуратнее, это тот же самый эффект, хотя :) Я не уверен на 100% от ваших имен изображений, чтобы вы может потребоваться для переключения булевых вокруг, но вы получите эту идею.

+0

Спасибо, Ник, позвольте мне попробовать и посмотреть, как обстоят дела;) –

+0

Это дерьмо! Спасибо, Ник! –

Смежные вопросы