如何設置JQuery .show/.hide而不重複Div選擇器

我希望將此函數傳遞給True或False，並且在此輸入上列出show（true）或hide（false）。我目前正在使用此功能如何設置JQuery .show/.hide而不重複Div選擇器

...

 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的每個結果重複自己。

我該如何將此重構爲更幹（不重複自己）的例子？

感謝，鋼鈑

來源

2010-07-07 4imble

Javascript不聽DRY。 – 2010-07-07 14:00:34

使用方括號標記選擇一個方法名取決於visible變量：

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

來源

2010-07-07 14:02:20 bobince

既然這是我用過的，而且你在1分鐘之前回答了這個問題。你會得到勾號:) – 4imble 2010-07-07 14:20:18

使用這種方法：

$("ID").toggle()

嘗試使用類，而不是ID的。例如：

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

來源

2010-07-07 13:58:56 tzim

這不會是「慢」:) – leoinfo 2010-07-07 14:00:08

可以改善這種

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

如果保持這個div具有相同的ID前綴開始！

來源

2010-07-07 13:59:59

如果你有一個生物，這將會很慢。 – jantimon 2010-07-07 14:03:34

這應該工作：

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);

來源

2010-07-07 14:00:40 jantimon

+1優秀的一個。 – 2010-07-07 14:03:18

非常好，非常感謝。 – 4imble 2010-07-07 14:19:40

你的意思如$（「＃Div1，＃Div2，＃Div3」）show（...

請參閱this瞭解更多信息。 ..

來源

2010-07-07 14:00:53

幾種方法：

$('#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');

來源

2010-07-07 14:01:47 jAndy

+ 1.不知道.add。 – 4imble 2010-07-07 14:26:11

又如：

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

來源

2010-07-07 14:04:16

如果我是你，我會用

替換

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

來源

2010-07-07 14:16:03 Kai

這會給出不同的結果......想象他這樣稱呼：'SetElementVisibility（true）; SetElementVisibility（真）; SetElementVisibility（真）; SetElementVisibility（假）; SetElementVisibility（真）; SetElementVisibility（真）; '。他將不得不重新編寫他的系統的其餘部分來使用你的功能。 – Hogan 2010-07-07 14:30:47

如何設置JQuery .show/.hide而不重複Div選擇器

回答

相關問題