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

如果您使用可选的switch参数，实际上toggle 可以为您提供帮助。

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

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

Answer 2

我会组织你的html，以便你可以使用兄弟姐妹（）和toggle（）。

Answer 3

这是我最终做的事情：

我组织了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（）的想法，但不幸的是，它不适用于内联元素，只适用于块级别，我需要使用跨度。

然后我可以用：

替换原来的Javascript

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

更简洁！感谢。

使用jQuery只显示一对元素之一

3 个答案: