Question

我如何缩短这个jQuery？我认为必须有比这更好的工作方式！？

（记得我是jQuery的新手）......

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

任何帮助或指示都会很棒，因为我已经到了本网站的最后一步，并希望它完成：）

Answer 1

您可以在链接上使用一些额外的数据属性和一个额外的类来缩短它。

所以让我们说你的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可以像这样重写：

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

Answer 2

所以看起来我们正试图重新制作标准的“手风琴”行为。根据页面的布局，如果可能，封装您的项目会很有帮助。这是一个可以打开和关闭的东西的可能解决方案。 jsFiddle

<div id="white" class="panel">
    <div class="tab"></div>
    <div class="content"></div>
</div>
<div id="v2black" class="panel">    
    <div class="tab"></div>
    <div class="content"></div>
</div>
<div id="v3black" class="panel">    
    <div class="tab"></div>
    <div class="content"></div>
</div>
<script>
jQuery(".tab").on("click", function() {
    $(this).closest('.panel').find('.content').toggle();
});
</script>

首先，我们将代码压缩成一个脚本标记和一个文档就绪语句，因为它有3个部分只会增加膨胀。

然后我确保选择$作为doc ready回调的参数。 jQuery会通过它传递一个参数jQuery所以在我们的代码块中我们可以安全地使用$，即使在我们的代码块之外它也被保留用于其他目的。

此处.tab通过遍历最近的.content并退回来控制他们的.panel。通过这种方式，相同的行为可以控制所有3.

但是，如果您的“标签”无法像这样封装，您始终可以将它们与以其他方式显示/隐藏的内容相关联。我们只需要看看你的HTML。

Answer 3

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

开始。如果您还有更多元素，则可能需要循环使用buttonid＆lt;＆gt; toggleid地图：

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

缩短我的jQuery

3 个答案: