點擊一個元素刪除其他元素類

Question

我正在製作一個網站我想制定一個規則，如果"all" div被點擊，"display: none"<div>將通過刪除它的'none'類出現。我的代碼不工作，我不明白爲什麼。

我已經嘗試了一切，我知道，搜索網絡的問題的答案，我找不到任何可以幫助我處理這個特定情況。

var check1; 
 
var check2; 
 

 
$("#btn-1").click(function() { 
 
    check1 = 1; 
 
}); 
 

 
$("#btn-2").click(function() { 
 
    check2 = 1; 
 
}); 
 

 
if (check1 == 1 && check2 == 1) { 
 
    $("#btn-3").removeClass("none"); 
 
}

div { 
 
    position: fixed; 
 
    padding: 20px; 
 
    background-color: lightblue; 
 
    width: 150px; 
 
} 
 

 
#btn-1 { 
 
    bottom: 0; 
 
} 
 

 
#btn-2 { 
 
    bottom: 0; 
 
    left: 250px; 
 
} 
 

 
#btn-3 { 
 
    top: 0; 
 
} 
 

 
.none { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="btn-1"> 
 

 
</div> 
 

 
<div id="btn-2"> 
 

 
</div> 
 

 
<div id="btn-3" class="none"> 
 

 
</div>

Answer 1

讓我們看看你的代碼確實是這樣做的：

var check1; 
var check2; 

$("#btn-1").click(function() { // <-- this function is run after a click 
    check1 = 1; 
}); 

$("#btn-2").click(function() { // <-- this function is run after a click 
    check2 = 1; 
}); 

// <-- there are no clicks yet, so none of the above functions are run yet 
// both click1 and click2 are undefined. 

if (check1 == 1 && check2 == 1) { 
    // This does not run, because both click1 and click2 are undefined at this point 
    $("#btn-3").removeClass("none"); 
} 

爲了解決這個問題，你必須確保在發生點擊後，檢查完成。所以：

var check1; 
var check2; 

$("#btn-1").click(function() { 
    check1 = 1; 
    checkClicks(); 
}); 

$("#btn-2").click(function() { 
    check2 = 1; 
    checkClicks(); 
}); 

function checkClicks() { 
    if (check1 == 1 && check2 == 1) { 
    $("#btn-3").removeClass("none"); 
    } 
} 

Answer 2

你當你點擊一個按鈕，檢查是否所有被點擊...

var check1, check2; 

$("#btn-1").click(function() { 
    check1 = 1; 
    if (check1 == 1 && check2 == 1) 
     $("#btn-3").removeClass("none"); 
}); 

$("#btn-2").click(function() { 
    check2 = 1; 
    if (check1 == 1 && check2 == 1) 
     $("#btn-3").removeClass("none"); 
}); 

Answer 3

添加如果事件：

var check1; 
var check2; 

$("#btn-1").click(function() { 
    check1 = 1; 
    if (check1 == 1 && check2 == 1) { 
    $("#btn-3").removeClass("none"); 
    } 
}); 

$("#btn-2").click(function() { 
    check2 = 1; 
    if (check1 == 1 && check2 == 1) { 
    $("#btn-3").removeClass("none"); 
    } 
}); 

Answer 4

創建一個像

的功能

var check1; 
 
var check2; 
 

 
$("#btn-1").click(function() { 
 
    check1 = 1; 
 
    checkHide() 
 
}); 
 

 
$("#btn-2").click(function() { 
 
    check2 = 1; 
 
    checkHide() 
 
}); 
 

 
function checkHide(){ 
 
if (check1 == 1 && check2 == 1) { 
 
    $("#btn-3").removeClass("none"); 
 
} 
 
}

div { 
 
    position: fixed; 
 
    padding: 20px; 
 
    background-color: lightblue; 
 
    width: 150px; 
 
} 
 

 
#btn-1 { 
 
    bottom: 0; 
 
} 
 

 
#btn-2 { 
 
    bottom: 0; 
 
    left: 250px; 
 
} 
 

 
#btn-3 { 
 
    top: 0; 
 
} 
 

 
.none { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="btn-1"> 
 

 
</div> 
 

 
<div id="btn-2"> 
 

 
</div> 
 

 
<div id="btn-3" class="none"> 
 

 
</div>

Answer 5

的，如果你放在外單擊狀態甚至需要這些2個單擊事件中插入。

請看看該解決方案的snippit。

誠摯的問候和快樂編碼;）

var check1; 
 
var check2; 
 

 
$("#btn-1").click(function() { 
 
    check1 = 1; 
 
    if (check1 == 1 && check2 == 1) { 
 
    $("#btn-3").removeClass("none"); 
 
} 
 
}); 
 

 
$("#btn-2").click(function() { 
 
    check2 = 1; 
 
    if (check1 == 1 && check2 == 1) { 
 
    $("#btn-3").removeClass("none"); 
 
} 
 
});

div { 
 
    position: fixed; 
 
    padding: 20px; 
 
    background-color: lightblue; 
 
    width: 150px; 
 
} 
 

 
#btn-1 { 
 
    bottom: 0; 
 
} 
 

 
#btn-2 { 
 
    bottom: 0; 
 
    left: 250px; 
 
} 
 

 
#btn-3 { 
 
    top: 0; 
 
} 
 

 
.none { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="btn-1"> 
 

 
</div> 
 

 
<div id="btn-2"> 
 

 
</div> 
 

 
<div id="btn-3" class="none"> 
 

 
</div>

Answer 6

的click事件的代碼塊中的條件語句，否則你if語句不會當條件滿足火true

var check1; 
 
var check2; 
 

 
$("#btn-1").click(function() { 
 
    check1 = 1; 
 
    console.log(check1); 
 

 
    if (check1 && check2) { 
 
    $("#btn-3").removeClass("none"); 
 
    } 
 
}); 
 

 
$("#btn-2").click(function() { 
 
    check2 = 1; 
 
    console.log(check2); 
 

 
    if (check1 && check2) { 
 
    $("#btn-3").removeClass("none"); 
 
    } 
 
});

div { 
 
    position: fixed; 
 
    padding: 20px; 
 
    background-color: lightblue; 
 
    width: 150px; 
 
} 
 

 
#btn-1 { 
 
    bottom: 0; 
 
} 
 

 
#btn-2 { 
 
    bottom: 0; 
 
    left: 250px; 
 
} 
 

 
#btn-3 { 
 
    top: 0; 
 
} 
 

 
.none { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="btn-1"> 
 

 
</div> 
 

 
<div id="btn-2"> 
 

 
</div> 
 

 
<div id="btn-3" class="none"> 
 

 
</div>