Question

好吧，似乎我知道足够的Javascript来伤害自己所以我来这里请求你们的帮助。这是我试图做的和我的问题。

我有两种形式，根据用户的选择，只会填写一种形式。他们会点击一个按钮或另一个按钮。当他们点击按钮时，表单会淡入，按钮会更改类别（从灯光按钮变为暗按钮）这是我遇到的问题。首先，我根本无法让窗体淡入，如果我点击它们两次而不是一次，按钮只会更改类。

另一件事我不知道怎么回事是如果我说选择了表单1但是我打算单击表单2然后我希望表单1淡出，表单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

jQuery - 更改样式和显示某些元素

1 个答案: