代码之家 › 专栏 › 技术社区 › 4imble

如何在不重复Div选择器的情况下设置JQuery.show/.hide

dry refactoring jquery javascript

4imble · 技术社区 · 16 年前

我想给这个函数传递一个True或False,并在这个输入上显示(True)或隐藏(False)列出元素。

我正在使用这个函数。。。

        function SetElementVisibility(visible) {
        if (visible) {
            $("#Div1").show("slow");
            $("#Div2").show("slow");
            $("#Div3").show("slow");
        }
        else {
            $("#Div1").hide("slow");
            $("#Div2").hide("slow");
            $("#Div3").hide("slow");
        }
    }

但我不想重复我自己为每个结果命名Div。

我怎样才能把它重构成一个更枯燥(不要重复)的例子呢?

谢谢, 科汉

8 回复 | 直到 16 年前

bobince 16 年前

使用方括号表示法根据 visible

$('#Div1, #Div2, #Div3')[visible? 'show' : 'hide']('slow');

jantimon 16 年前

这应该起作用:

function SetElementVisibility(visible) {
   $("#Div1,#Div2,#Div3")[visible]("slow");
}

// Display all
SetElementVisibility( "show" );

// Hide all
SetElementVisibility( "hide" );

如果你不想使用 "show" 和 "hide" 作为论据,但是 true 和 false 你得改变一下:

function SetElementVisibility(visible) {
   $("#Div1,#Div2,#Div3")[visible?'show':'hide']("slow");
}

// Display all
SetElementVisibility( true );

// Hide all
SetElementVisibility( false );

Andy Robinson 16 年前

你的意思是像$(“#Div1,#Div2,#Div3”)。显示(。。。

看到了吗 this 有关详细信息。。。

tzim 16 年前

使用此方法:

$("ID").toggle()

尝试使用class而不是id。例如:

function SetElementVisibility(visible) {
    if (visible) {
        $(".showHideDiv").show("slow");
    }
    else {
        $(".showHideDiv").hide("slow");
    }
}

Haim Evgi 16 年前

if(..)
$('[id^=Div]').show();
else
$('[id^=Div]').hide();

如果你保持这个div以相同的id前缀开始!

jAndy 16 年前

有几种方法:

$('#Div1, #Div2, #Div3').hide('slow');

或

$('#Div1').add('#Div2').add('#Div3').hide('slow');

$.each(['#Div1', '#Div2', '#Div3'], function(i,v){
    $(v).hide('slow');
});

好吧,第三个看起来有点陌生,但不管怎样。

如果所有这些都需要的话 divs 真的从 Div 您也可以使用

$('div[id=^Div]').hide('slow');

Felix Kling 16 年前

另一个例子:

function SetElementVisibility(visible) {
    $elements =  $("#Div1, #Div2, #Div3");
    if (visible) {
        $elements.show("slow");
    }
    else {
        $elements.hide("slow");
    }
}

Kai 16 年前

如果我是你,我会用

 function SetElementVisibility() {
       $('#Div1,#Div2,#Div3').toggle();
}