Использование jQuery для отображения только одной пары элементов

Question

У меня есть несколько элементов сообщения, которые попадают парами: Если показан элемент A1, то A2 должен быть скрытым, то же самое для B1/B2, C1/C2 и т. Д. на. У меня есть код JQuery работает, но он получает многословный:

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

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

//etc... 

Это кажется громоздким и Дурманящим. Есть ли лучший способ инкапсулировать представление о том, что эти элементы спарены и должны показывать/скрывать друг друга? Я посмотрел на переключатель, но это неправильно.

Answer 1

Вот что я в конечном итоге делает:

Я организовал 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); 

Гораздо более кратким! Благодарю.

Answer 2

Я бы организовал ваш html, чтобы вы могли использовать родных братьев() и toggle().

Answer 3

На самом деле toggleможет помочь вам здесь, если вы используете дополнительный switch параметра.

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

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