Question

我正在努力处理我的If / Else声明。我不能让声明的其他部分运行。我认为它是订购的东西......但我尝试的一切都没有帮助。

我想要发生什么：点击粉红色按钮，出现小粉红色。单击绿色按钮，出现绿色小框，粉红色消失。

这是HTML：

<div id="pport01"></div>
<div id="pport02"></div>
<div class="p01"></div>
<div class="p02"></div>

这是css：

#pport01{
    position:relative;
    display: inline-block;
    width: 100px;
    height:100px;
    background-color: pink;
    cursor: pointer;
}

#pport02{
    position:relative;
    display: inline-block;
    width: 100px;
    height:100px;
    background-color: green;
    cursor: pointer;
}

.p01{
    position:relative;
    display: none;
    width: 10px;
    height:10px;
    background-color: pink;
    display: none;

}

.p02{
    position:relative;
    display:none;
    width: 10px;
    height:10px;
    background-color: green;
}

这是JS：

var active01 = false;
var active02 = false;

$('#pport01').click(function(){
    active02= false;
    active01 = true;
    if(active01){
        console.log(active01 + "port1 true");
        $('.p01').fadeIn("slow");
    }else{
        console.log(active01 + "port1 false");
        $('.p02').fadeOut("slow");
    }
});

$('#pport02').click(function(){
    active01 = false;
    active02 = true;
    if(active02){
        console.log(active02 + "port2 true");
        $('.p02').fadeIn("slow");
    }else{
        console.log(active02 + "port2 false");
        $('.p02').fadeOut("slow");
    }
});

事实证明我不想在那里使用if / else语句。谢谢你们每一个人的帮助！ It works now!

Answer 1

根据你的代码：

$('#pport01').click(function(){
    active02= false;

// active01 is set to true before the IF

    active01 = true;
    if(active01){
        console.log(active01 + "port1 true");
        $('.p01').fadeIn("slow");
    }else{
        console.log(active01 + "port1 false");
        $('.p02').fadeOut("slow");
    }
});

当if被解析时，

active01将始终为true，因此将永远不会评估else。你应该重新思考你打算实现的目标。

也许你不需要if：

$('#pport01').click(function(){
        $('.p01').fadeIn("slow");
        $('.p02').fadeOut("slow");
});

$('#pport02').click(function(){
        $('.p02').fadeIn("slow");
        $('.p01').fadeOut("slow");
});

Answer 2

当您在if / else条件之前分别将布尔 active01和active02设置为true时，您将永远不会进入else循环。

Answer 3

我没有jquery专家，但对于我没有受过教育的人来说，问题在于if声明之前的价值分配问题：

active01 = true;
if(active01){...

如果您明确将active01标记设置为true，则始终会满足if，因此永远不会运行else。

Answer 4

试试这个：

$('#pport01').click(function(){
if(active01){
    console.log(active01 + "port1 true");
    $('.p01').fadeIn("slow");
}else{
    console.log(active01 + "port1 false");
    $('.p02').fadeOut("slow");
}
active02= false;
active01 = true;
}

问题是您在IF之前为active01和active02分配值，因此active01始终为true，并且始终执行第一个IF语句第二个函数也是一样，在IF / ELSE

之后分配active01和active02

Answer 5

对于此块，您的else语句将不会运行，因为boolean active02在函数开头声明为true。

你的第一个街区同样的事情。只有你颠倒了active01和active02的顺序。

$('#pport02').click(function(){
active01 = false;
active02 = true;
if(active02){
    console.log(active02 + "port2 true");
    $('.p02').fadeIn("slow");
}else{
    console.log(active02 + "port2 false");
    $('.p02').fadeOut("slow");
}

}）;

如果您尝试在active01和active02之间切换为true，请在重新分配标志之前先运行if / else语句。

Answer 6

尝试这样的事情。

active01 === true ? $('.p01').fadeIn("slow") :  $('.p02').fadeOut("slow");

Answer 7

我相信你正在努力做到这一点：

$('#pport01').click(function(){
  $('.p01').fadeIn("slow");
  $('.p02').fadeOut("slow");

});

$('#pport02').click(function(){
   $('.p02').fadeIn("slow");
   $('.p01').fadeOut("slow");

});

如果/ Else Statement没有运行else

7 个答案: