使用jQuery僅顯示一對元素中的一個

我有許多成對出現的消息元素：如果顯示元素A1，那麼A2應該隱藏，對於B1/B2，C1/C2等是相同的上。我有jQuery的代碼工作，但它得到了詳細：使用jQuery僅顯示一對元素中的一個

if (conditionA) { 
    $("#a1").show(); 
    $("#a2").hide(); 
else { 
    $("#a1").hide(); 
    $("#a2").show(); 
} 

if (conditionB) { 
    $("#b1").show(); 
    $("#b2").hide(); 
else { 
    $("#b1").hide(); 
    $("#b2").show(); 
} 

//etc...

這似乎麻煩和令人頭腦麻木。有沒有更好的方法來封裝這些元素配對的概念，並且應該相互顯示/隱藏？我已經看過切換，但那不對。

來源

2009-08-28 Ned Batchelder

你的HTML是什麼樣的？可能有一種方法來組織HTML來減少這種重複的代碼。 – SolutionYogi 2009-08-28 17:33:20

@Ned，只是一個fyi，但切換也有能力切換兩個功能，內部保持狀態。例如$（「＃id」）。toggle（function（）{alert（「hi」）;}，function（）{alert（「bye」）;}）;我沒有提到這一點，我感到失望，因此你有更多的信息前進。 – Marc 2009-08-28 17:57:14

這裏是我落得這樣做：

我組織了HTML有對下一個新的父配對的元素命名的目的：

<p id="first_flap"><span class="flap">MsgA1</span><span class="flap">MsgA2</span></p> 
<p id="second_flap"><span class="flap">MsgB1</span><span class="flap">MsgB2</span></p>

每一對具有類「皮瓣」就可以了。然後，我可以寫一個函數：

function flip_flap(sel, cond) { 
    /* Find sel, then show flaps within it according to cond. */ 
    var flaps = jQuery(sel + ">.flap"); 
    var f0 = jQuery(flaps[0]); 
    (cond ? f0.show() : f0.hide()); 
    var f1 = jQuery(flaps[1]); 
    (cond ? f1.hide() : f1.show()); 
}

我喜歡使用切換（）的想法，但不幸的是，它並不適用於內聯元素，只有塊級工作，我需要使用跨。

然後我可以代替我原來的Javascript：

flip_flap("#first_flap", conditionA); 
flip_flap("#second_flap", conditionB);

簡潔得多！謝謝。

來源

2009-08-29 21:49:18

將toggle路由轉換爲隱藏和顯示，它處理塊和內聯元素（至少在1.3.2）。你在哪個版本中不能切換內聯元素？ – 2009-08-31 15:40:24

嗯，看起來像我使用1.2.6，也許我應該升級... – 2009-09-01 14:31:46

我會組織你的html，以便你可以使用兄弟（）和切換（）。

來源

2009-08-28 17:32:16 helloandre

你能舉個例子嗎？請記住，我不想一定改變div的狀態：我對toggle的理解是它檢查了當前狀態，並在hide和show之間翻轉。我可能會運行我的代碼，條件與上次一樣，並且沒有任何更改。 – 2009-08-28 17:36:11

其實toggle可以如果您使用可選的switch參數，可以在這裏幫助您。

$("#a1").toggle(conditionA); 
$("#a2").toggle(!conditionA); 

$("#b1").toggle(conditionB); 
$("#b2").toggle(!conditionB);

來源

2009-08-28 17:34:45

啊！我誤解了切換參數的含義。 – 2009-08-28 17:39:48

'！'在這裏應該顛倒過來。如果開關是「真」，則切換*隱藏元素，而不是相反。 – 2009-08-28 17:45:19

我的歉意，也許我應該自己檢查一下文檔！固定。 – 2009-08-28 18:06:13

使用jQuery僅顯示一對元素中的一個

回答

相關問題