代码之家 › 专栏 › 技术社区 › Ned Batchelder

使用jQuery只显示一对元素中的一个

jquery

Ned Batchelder · 技术社区 · 17 年前

我有许多成对的消息元素:如果显示了元素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...

3 回复 | 直到 17 年前

Alex Barrett 17 年前

事实上 toggle 如果您使用可选选项,请在此帮助您 switch

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

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

helloandre 17 年前

我会组织您的html,这样您就可以使用sibbines()和toggle()。

Ned Batchelder 17 年前

下面是我最后做的:

为了便于命名,我组织了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>

每一对都有一个等级“flap”。然后我可以写一个函数:

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

更简洁!谢谢

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前