Javascript 如何压缩.show和.hide jQuery？

我对jQuery非常陌生，我知道必须有更快、更少的代码才能做到这一点。我这里有两个div。divone将在不同的Div中显示一个类。一旦用户完成并单击Div two，Div two将隐藏该元素。我觉得我的jquery代码太长了。这是我的护照

Div one
第二部分

#一个{
宽度：60px；
背景颜色：绿色；
填充：10px；
光标：指针；
}
#两个{
宽度：60px；
背景颜色：绿色；
填充：10px；
显示：无；
光标：指针；
}
$（文档）.ready（函数（）{
$（'#一'）。单击（函数（）{
$（this.hide（）；
});
$（'#一'）。单击（函数（）{
$（'#two'）.show（）；
});
$（'#two'）。单击（函数（）{
$（this.hide（）；
});
$（'#two'）。单击（函数（）{
$（“#一”）.show（）；
});
});

这样更好

$(document).ready(function () {
    $('#one').click(function () {
        $(this).hide();
        $('#two').show();
    });
    $('#two').click(function () {
        $(this).hide();
        $('#one').show();
    });
});

这样更好

$(document).ready(function () {
    $('#one').click(function () {
        $(this).hide();
        $('#two').show();
    });
    $('#two').click(function () {
        $(this).hide();
        $('#one').show();
    });
});

---

您已经在调用

$（“#divID”）。单击（）

函数无需再次调用

#one

和

#two

DIV

$（文档）.ready（函数（）{
$（'#一'）。单击（函数（）{
$（this.hide（）；
$（'#two'）.show（）；
});
$（'#two'）。单击（函数（）{
$（this.hide（）；
$（“#一”）.show（）；
});
});
#一个{
宽度：60px；
背景颜色：绿色；
填充：10px；
光标：指针；
}
#两个{
宽度：60px；
背景颜色：绿色；
填充：10px；
显示：无；
光标：指针；
}

Div one
第二部分

您已经在调用
$（“#divID”）。单击（）
函数无需为
#one
和
#two
DIV再次调用它


$（文档）.ready（函数（）{
$（'#一'）。单击（函数（）{
$（this.hide（）；
$（'#two'）.show（）；
});
$（'#two'）。单击（函数（）{
$（this.hide（）；
$（“#一”）.show（）；
});
});
#一个{
宽度：60px；
背景颜色：绿色；
填充：10px；
光标：指针；
}
#两个{
宽度：60px；
背景颜色：绿色；
填充：10px；
显示：无；
光标：指针；
}

Div one
第二部分

尝试使用
.toggle（）

jsiddle
尝试使用
.toggle（）

jsiddle
您可以为两个选择器组合单击事件

$(document).ready(function () {
    $('#one, #two').click(function () {
        $('p').show();
        $(this).hide();
    });
});

您可以为两个选择器加入单击事件

$(document).ready(function () {
    $('#one, #two').click(function () {
        $('p').show();
        $(this).hide();
    });
});

试试这个。消除了对ID依赖的需要

$('p').click(function () {
        $('p').toggle();       
    });

试试这个。消除了对ID依赖的需要

$('p').click(function () {
        $('p').toggle();       
    });

非常感谢！有道理。非常感谢！有道理。这绝对是最好和最压缩的选择。非常感谢！将从此处开始使用此选项。如果变量为3个不同的div id，是否可以切换三个不同的div？@kenny“如果变量为3个不同的div id，是否可以切换三个不同的div？”是的。通过在post中调整
js
，该功能是可能的。然而，请注意，最初的问题专门针对“我这里有两个div”中的两个元素。也许会提出新的问题，包括问题文本中的具体要求？这绝对是最好和最压缩的选择。非常感谢！将从此处开始使用此选项。如果变量为3个不同的div id，是否可以切换三个不同的div？@kenny“如果变量为3个不同的div id，是否可以切换三个不同的div？”是的。通过在post中调整
js
，该功能是可能的。然而，请注意，最初的问题专门针对“我这里有两个div”中的两个元素。可能会问新的问题，包括问题文本中的具体要求？如果下面的答案之一回答了您的问题，即本网站的工作方式，您会“接受”答案，更多信息：当有人回答我的问题时，我该怎么办。但前提是你的问题真的得到了回答。如果不是，考虑在问题上增加更多的细节。我相信我必须至少有15个声望点才能接受答案，对吧？我在任何地方都看不到任何“接受”指标。“若要将答案标记为已接受，请单击答案旁边的复选标记，将其从灰色变为已填写。”如果以下答案中的一个回答回答了您的问题，根据本网站的工作方式，您会“接受”答案，详情如下：当有人回答我的问题时，我该怎么办。但前提是你的问题真的得到了回答。如果不是，考虑在问题上增加更多的细节。我相信我必须至少有15个声望点才能接受答案，对吧？我在任何地方都看不到任何“接受”指标。“要将答案标记为已接受，请单击答案旁边的复选标记，将其从灰色变为已填写。”