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