Если/другое заявление не запустить еще

Question

Here is my JSFiddle:

Я борюсь с моим 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"); 
    } 
}); 

Оказывается, я не хочу, если/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"); 
    } 
}); 

active01 всегда будет верно, когда if будет решен, так что еще никогда не будет оценен. Вы должны переосмыслить то, что вы намереваетесь достичь.

Может быть, вам не нужен, если:

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

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

Answer 2

Я не эксперт JQuery, но мой непросвещенный глаз проблема с присвоением значения непосредственно перед if высказыванием:

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

когда вы явно установить active01 флаг так, if всегда будет удовлетворен, поэтому else никогда не будет запущен.

Answer 3

Попробуйте это:

$('#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; 
} 

Проблема заключается в том, что вы назначаете значения для active01 и active02 раньше, если так это нормально для active01 быть всегда истинно, и первый оператор IF всегда выполняется. То же самое для второй функции присваивает active01 и active02 после IF/ELSE

Answer 4

Для этого блока, ваш оператор else не будет запущен, потому что логическое значение 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, являющимся истинным, сначала запустите инструкцию if/else перед переназначением ваших флагов.

Answer 5

Попробуйте что-нибудь подобное.

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

Answer 6

Как установить булевоactive01 и active02 истину соответственно непосредственно перед, если/другим условием, вы никогда не войти в петле другой.

Answer 7

Я считаю, что ваши пытаются это сделать:

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

}); 

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

});