jQuery - 改變樣式和顯示某些元素

Question

好吧，看來我知道足夠的Javascript來傷害自己，所以我來問你們這裏的幫助。這是我想要做的和我的問題。

我有兩種形式，只有一個將根據用戶的選擇填寫。他們會點擊一個按鈕或另一個按鈕。當他們點擊按鈕時，表單淡入並且按鈕改變類別（從一個燈光按鈕變成一個黑暗按鈕）這是我遇到的問題。首先，我無法讓窗體淡入，按鈕只會改變類，如果我不點擊它們兩次。

我不知道如何去做的另一件事是，如果我說選擇了表單1，但我的意思是點擊表單2然後我想要一個窗體淡出，窗體2淡入和按鈕相應地改變。這是我的代碼：

JS

<script type="text/javascript"> 
var $j = jQuery.noConflict(); 
var $jtest1 = $j('#test1'); 
var $jtest2 = $j('#test2'); 

$j("#button1").live('click',function(){ 
    //Fade out form if shown and fade in form selected 
    $jtest2.fadeOut("slow", function(){ 
     $jtest1.fadeIn("slow"); 
    }); 
    $j('#button1').live('click', function(){ 
     //change class from light to dark 
     $j(this).addClass('dark_button').removeClass('light_button'); 
    }); //I need to change this class to light if 
     // button 2 is selected and change button 2 to dark 
}); 
</script> 

HTML

<p class="light_button" id="button1">Test 1 </p> 
<p class="light_button" id="button2">Test 2 </p> 


<div class="hide" id="test1"><p>TEST</p></div> 
<div class="hide" id="test2"><p>TEST 2</p></div> 

Note: class="hide" is style="display:none" 

感謝您的幫助，因爲我是一個，但被卡住，不知道去這個問題。也請給我一個例子，因爲我並不總是跟隨，當有人說這改變爲等

Answer 1

看看下面的代碼，添加了爲什麼

$j("#button1").live('click',function(){ 
    //Fade out form if shown and fade in form selected 
    $jtest2.fadeOut("slow", function(){ 
     $jtest1.fadeIn("slow"); 
    }); 

    //The following is inside the click so I do not get added until the first click 
    //and added after every click so I multiply! 
    //Hence why it takes 2 clicks 

    $j('#button1').live('click', function(){ 
     //change class from light to dark 
     $j(this).addClass('dark_button').removeClass('light_button'); 
    }); //I need to change this class to light if 
     // button 2 is selected and change button 2 to dark 
}); 

你應該做這樣的事情

評論

$j("#button1, #button2").live('click', 
    function(){ 

     //figure out what button was clicked. 
     if(this.id === "button1"){ 
      var btnA = $j(this); 
      var btnB = $j("#button2"); 
      var divA = $j('#test1'); 
      var divB = $j('#test2'); 
     } 
     else{ 
      btnA = $j(this); 
      btnB = $j("#button1"); 
      divA = $j('#test2'); 
      divB = $j('#test1'); 
     } 

     //make sure it is not already active, no use to show/hide when it is already set 
     if(btnA.hasClass('dark_button')){ 
      return; 
     } 

     //see if div is visible, if so hide, than show first div 
     if(divB.is(":visible")){   
      divB.fadeOut("slow", function(){ 
       divA.fadeIn("slow"); 
      }); 
     } 
     else{//if already hidden, just show the first div 
      divA.fadeIn("slow");    
     } 

     //Add and remove classes to the buttons to switch state 
     btnA.addClass('dark_button').removeClass('light_button'); 
     btnB.removeClass('dark_button').addClass('light_button'); 
    }  
); 

jsfiddle example