代码之家 › 专栏 › 技术社区 › 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();
}

推荐文章

Glory Raj · 有什么方法可以使这两个块具有共同的功能吗

4 年前

Justin · Python自属性重命名

8 年前

g.pickardou · 如何重构元组<..>到具有描述性名称的类型化类?

8 年前

Enoy · Javascript:重构现有代码以分离关注点,我们如何使用类/原型并从它自己的对象方法调用?

8 年前

Steve Harrison iDhaval · 为什么某些调用者没有显示在显示相关项目列表(Xcode)中?

8 年前

Sabutobi · 长dict属性行的重构

8 年前

Falco Alexander · 简单LINQ重构/样式

8 年前

05bs001 · Euler 12需要优化

8 年前

slartidan · 如何将lambda表达式重构为方法引用?

8 年前

Alex · 在Java类中频繁使用与映射键相同的字符串[已关闭]

8 年前