jQuery - 更改样式和显示某些元素 [英] jQuery - Changing Styles and Displaying Certain Elements
问题描述
我有两种表格，只有一种会根据用户的选择填写。他们会点击一个按钮或另一个按钮。当他们点击按钮时，表单淡入并且按钮改变类别（从一个灯光按钮变成一个黑暗按钮）这是我遇到的问题。首先，我无法让窗体淡入，按钮只会改变类，如果我不点击它们两次。
另外一个我不确定如何去做的事情是，如果我选择了表单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（）{
//如果显示淡出表单并淡入所选表单
$ jtest2。 fadeOut（slow，function（）{
$ jtest1.fadeIn（slow）;
}）;
$ j（'＃button1'）。live（'click'，函数（）{
//将类从浅色变为深色
$ j（this）.addClass（'dark_button'）。removeClass（'light_button'）;
}）; // I如果选择
//按钮2并将按钮2更改为深色
}），则需要将该类更改为亮;
< / script>
HTML
< p class =light_buttonid =button1>测试1< / p>
< p class =light_buttonid =button2>测试2< / p>
< div class =hideid =test1>< p> TEST< / p>< / div>
< div class =hideid =test2>< p> TEST 2< / p>< / div>
注意：class =hide是style =display：none
感谢任何帮助，因为我是一个但卡住，不确定要去做这件事。也请给我一个例子，因为当有人说这样的改变时，我并不总是这样。
查看代码（'button'）。live（'click'，function（）{$（$'$'$ $ $ $ $ $ $ $'$'$'$'$'$' b $ b //淡出窗体（如果显示）并淡入所选形式
$ jtest2.fadeOut（slow，function（）{
$ jtest1.fadeIn（slow）;
}）;
//以下内容是点击，所以我不会被添加，直到第一次点击
//并在每次点击后添加，所以我乘以！
//因此，为什么需要2次点击
$ j（'＃button1'）。live（'click'，function（）{
//将类从浅色转换为深色
$ j（this）.addClass（'dark_button'）。removeClass（'light_button'）;
}）; //如果选择
//按钮2并更改按钮， 2变黑
}）;
您应该这样做
<$ （$'code $ j（＃button1，＃button2）。live（'click'，
function（）{
//找出哪个按钮（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'）; $ （btnA.hasClass（'dark_button'））{
//确定它没有被激活，当它已经设置时没有用来显示/隐藏
if b $ b return;
}
//查看div是否可见，如果隐藏，则显示第一个div
if（divB.is（：visible）） {
divB.fadeOut（slow，fu nction（）{
divA.fadeIn（slow）;
}）;
}
else {//如果已经隐藏，只显示第一个div
divA.fadeIn（slow）;
}
//向按钮添加和删除类以切换状态
btnA.addClass（'dark_button'）。removeClass（'light_button'）;
btnB.removeClass（'dark_button'）。addClass（'light_button'）;
}
）;
Well it seems I know enough Javascript to hurt myself so I come asking help from you guys here. Here is what I am attempting to do and my issue.
I have two forms and only one will be filled out depending on the users choice. They will click one button or the other. When they click the button the form fades in and the button changes classes (goes from a light button to a dark button) Here is were I am running into issues. First I cannot get the form to fade in at all and the buttons will only change classes if I click them twice not once.
One other thing I am not sure how to go about is if I have say form 1 chosen but I meant to click form 2 then I want form one to fade out, form 2 to fade in and the buttons change accordingly. Here is my Code:
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"
Thanks for any help because I am a but stuck and not sure to go about this. Also please give me an example because I do not always follow when someone say change this to that etc.
Look at the code below, added comments on why
$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
});
You should be doing something like this
$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');
}
);
这篇关于jQuery - 更改样式和显示某些元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
