Question

是否有更简单，更简短的方法来编码显示和隐藏div的方法，而不必将每一行表示为显示或隐藏？

＆＃13;

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

＆＃13;

Answer 1

您可以使用,选择多个课程： -

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

Answer 2

使用jquery的,尝试multiple-selector

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

Answer 3

其他答案肯定会给出正确答案，但从javascript的角度来看，您可能想要创建一个名为box-hidable的新类，然后将此类提供给您要隐藏的每个框（例如，）

<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（）;

但是如果你有一组这样的元素来切换它们的状态，那么你可以对这两个组应用不同的类，即

'。box1，.box2，＃box3'添加了类class_a '.box4，.box5，.box6，.box7'添加了类class_b

然后您可以轻松切换

。

$（ 'class_a'）隐藏（）; $（ 'class_b'）显示（）;

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>

更简单，更简单的代码隐藏/显示div的方法

5 个答案: