Использование 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

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

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

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

Answer 2

Вот что я в итоге сделал:

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

Мне понравилась идея использования toggle (), но, к сожалению, он не работает для встроенных элементов, только для уровня блока, и мне нужно было использовать span.

Тогда я могу заменить свой оригинальный Javascript на:

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

Гораздо лаконичнее! Спасибо.

Answer 3

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