隱藏/顯示div的代碼更簡單快捷

Question

有沒有更簡單，更短的方法來編碼顯示和隱藏div的方法，而不必將每一行都表示為顯示或隱藏？

 function startOver() { $('.box1').hide(); $('.box2').hide(); $('#box3').hide(); $('.box4').show(); $('.box5').show(); $('.box6').show(); $('.box7').show(); $(".aboveDiv").html("Insert Text"); } 

Answer 1

您可以使用, ：-選擇多個類別

$('.box1, .box2, #box3').hide();
$('.box4, .box5, .box6, .box7').show();
$(".aboveDiv").html("Insert Text");

Answer 2

嘗試使用,的jquery進行多重選擇

function startOver() {
    $('.box1, .box2, #box3').hide();
    $('.box4, .box5, .box6, .box7').show();
    $(".aboveDiv").html("Insert Text");
}

Answer 3

當然，其他答案也能給出正確的答案，盡管從javascript的角度來看，您可能想要創建一個新的類（如box-hidable），然后將該類提供給要隱藏的每個box（例如）

<div class="box1 box-hidable"></div>
<div class="box2 box-hidable"></div>
(etc)

然后在您的腳本調用中

$(".box-hidable").hide();

這使您可以很好地分解類結構，並使代碼更具可讀性。

Answer 4

正如其他人所說的，下面的操作將幫助您

$（'。box1，.box2，＃box3'）。hide（）; $（'。box4，.box5，.box6，.box7'）。show（）;

但是，如果您有一組這樣的元素來切換其狀態，則可以將不同的類應用於這兩個組，即

添加類class_a的'.box1，.box2，＃box3''添加類class_b的'.box4，.box5，.box6，.box7'

然后您可以輕松切換

$（'。class_a'）。hide（）; $（'。class_b'）。show（）;

Answer 5

全局類也可以使用。

function startOver() {
    $('.hidebox').hide();
    $('.showbox').show();
    $(".aboveDiv").html("Insert Text");
}

<div class="box1 hidebox"></div>
<div class="box2 hidebox"></div>
<div class="box3 hidebox"></div>
<div class="box4 showbox"></div>
<div class="box5 showbox"></div>
<div class="box6 showbox"></div>