Javascript 缩短我的jQuery

如何缩短jQuery？我想一定有比这更好的工作方式

（请记住，我是jQuery新手）

jQuery（函数（）{
var White=jQuery（“#White”）.hide（）；
jQuery（“#firstpagename”）。在（“单击”，函数（）上{
White.toggle（）；
});
});
jQuery（函数（）{
var Black2=jQuery（“#v2black”）.hide（）；
jQuery（#secondpagename”）。在（“单击”，函数（）上{
Black2.toggle（）；
});
});
jQuery（函数（）{
var Black3=jQuery（“#v3black”）.hide（）；
jQuery（#thirdpagename”）。在（“单击”，函数（）上{
Black3.toggle（）；
});
});

---

任何帮助或指导都是非常好的，因为我在这个网站上已经走到了最后一步，希望它能完成：）

所以看起来我们正在尝试重新创造标准的“手风琴”行为。根据页面的布局，如果可能的话，封装项目可能会有所帮助。这里有一个可能的解决方案，可以使事物打开和关闭

​
jQuery（“.tab”）。在（“单击”，函数（）{
$（this）.closest（'.panel'）.find（'.content'）.toggle（）；
});​

首先，我们将代码压缩为一个脚本标记和一个document ready语句，因为将其分成三部分只会增加膨胀

然后我确保选择

$

作为doc ready回调的参数。jQuery会很乐意地给它传递一个参数

jQuery

，这样在我们的代码块内我们就可以安全地使用

$

，即使在我们的代码块外它是为其他目的保留的

这里的

.tab

通过向上遍历最近的

.panel

和向下遍历来控制它们的

.content

。通过这种方式，相同的行为可以控制所有3个

---

但是，如果您的“选项卡”不能像这样封装，您可以始终将它们与要以另一种方式显示/隐藏的内容相关联。我们只需要查看您的html。

您可以在链接上使用一些额外的数据属性和额外的类，使其略短一些

<script>
jQuery(function() {
    var White = jQuery("#white").hide();
    jQuery("#firstpagename").on("click", function() {
        White.toggle();

    var Black2 = jQuery("#v2black").hide();
    jQuery("#secondpagename").on("click", function() {
        Black2.toggle();
    });

    var Black3 = jQuery("#v3black").hide();
    jQuery("#thirdpagename").on("click", function() {
        Black3.toggle();
    });
});
</script>

假设您的html如下所示：

<div id="white">white</div>
<div id="v2black">v2black</div>
<div id="v3black">v3black</div>

<div id="firstpagename"  class="toggle" data-for="white">toggle white</div>
<div id="secondpagename" class="toggle" data-for="v2black">toggle v2bacl</div>
<div id="thirdpagename"  class="toggle" data-for="v3black">toggle v3black</div>

jQuery(function() {
  $('.toggle').on('click', function() {
    var id = $(this).attr('data-for');
    $('#' + id).toggle();
  });
});

---

你能发布你的html吗？既然您在上使用了

，我们可以假设您正在加载动态内容吗？您可以共享您的html吗？@mrtsherman:on（）上的
on（）
并没有按照动态元素应该使用的方式使用，所以这种假设是无效的。@Purmou没有，但它们不是动态元素这一点并不明确。这是
.on（）
的一个非常有效的语法，如果不是的话（尽管我可能会选择
.click（））
在我看来，它会自动显示一个自侦听节点。首先，为什么要在三个单独的脚本标记中将其拆分为三个单独的脚本？这似乎太过分了。#firstpagename！=#white，#secondpagename！=#v2black等等->从他的代码中了解很少。基本上，$（这）不是他想切换的东西。哦，只是认识到这不会按原样工作，除非你只想隐藏它，再也不显示它。；-）在这种情况下，最好使用
.hide（）
。您需要包含一些关系（可能toggle目标的结构是
next（）
元素），然后使用DOM遍历。@GregPettit谢谢，我已经将解决方案更新为“控件”和“内容”，在这里我们还可以使用data函数代替attr，如
$（this）。data（“for”）
。jquery在此对象中查找属性的数据。
var map = {
    "white": "firstpagename",
    "v2black": "secondpagename",
    ...
};
for (var toggler in map)
    makeToggle(toggler, map[toggler]);
function makeToggle(togglerid, pageid) {
    var page = $(document.getElementById(pageid)).hide();
    $(document.getElementById(togglerid)).click(function() {
        page.toggle();
    });
}

<div id="white">white</div>
<div id="v2black">v2black</div>
<div id="v3black">v3black</div>

<div id="firstpagename"  class="toggle" data-for="white">toggle white</div>
<div id="secondpagename" class="toggle" data-for="v2black">toggle v2bacl</div>
<div id="thirdpagename"  class="toggle" data-for="v3black">toggle v3black</div>

jQuery(function() {
  $('.toggle').on('click', function() {
    var id = $(this).attr('data-for');
    $('#' + id).toggle();
  });
});