如何减小这个 jQuery 脚本的大小并使其更灵活？答案

【问题标题】：How to Reduce Size of This jQuery Script and Make it More Flexible?如何减小这个 jQuery 脚本的大小并使其更灵活？
【发布时间】：2011-07-06 13:57:21
【问题描述】：

我刚刚创建了显示/隐藏（切换）HTML 块的脚本。有四个按钮，每个按钮都可以切换其 HTML 块。当打开任何 HTML 块，但用户点击了该 HTML 块的关联按钮以外的其他按钮时...它会隐藏该 HTML 块并显示新的。

这是我目前拥有的：

$('.btn_add_event').click( function() {

    $('.block_link, .block_photos, .block_videos').hide();
    $('.block_event').toggle();

});

$('.btn_add_link').click( function() {

    $('.block_event, .block_photos, .block_videos').hide();
    $('.block_link').toggle();

});

$('.btn_add_photos').click( function() {

    $('.block_event, .block_link, .block_videos').hide();
    $('.block_photos').toggle();

});

$('.btn_add_videos').click( function() {

    $('.block_event, .block_link, .block_photos').hide();
    $('.block_videos').toggle();

});

任何想法如何减少代码大小？此外，这个脚本不是很灵活。想象一下添加两个新按钮和块。

【问题讨论】：

哇！ 10 个答案，但只有两个赞成票。糟糕的生活。 xD

标签： javascript jquery toggle block show-hide

【解决方案1】：

就像 Sam 说的，我会使用所有块共享的类，因此您永远不必更改该代码。其次，您可以尝试“遍历”到最近的块，从而避免使用它的名称。这种方法比对每个特定块进行硬编码要好，但是如果 html dom 树发生更改，您将需要重构。最后但最好的是，您可以将所需的类名块作为变量传递给函数。以下是您可以复制粘贴的内容，与您开始使用的内容接近。

$('.myAddButtonClass').click( function() {

    $('.mySharedBlockClass').filter(':visible').hide();
//find a good way to 'traverse' to your desired block, or name it specifically for now.
//$(this).closest(".mySharedBlockClass").show()  complete guess
    $('.specificBlockClass').show();
});

【讨论】：

【解决方案2】：

我一直在阅读这篇“当打开任何 HTML 块，但用户点击了除该 HTML 块的关联按钮之外的其他按钮时”，认为当它只是英语不好时，我的眼睛让我失望了。

如果你想让它更动态，你可以做的是添加一个通用的类关键字。然后当点击事件引发时。您可以让它循环通过所有具有关键字并将它们全部隐藏（当前单击的除外），然后使用“this”关键字显示当前的。

【讨论】：

有点抽象，但意图是好的。举个例子会有所帮助。
对不起。我的英语不是最好的！我知道。 ;(

【解决方案3】：

你可以参考下面的链接，

http://chandreshmaheshwari.wordpress.com/2011/05/24/show-hide-div-content-using-jquery/

调用function showSlidingDiv() onclick 事件并动态传递您的按钮类。

这可能有用。

谢谢。

【讨论】：

【解决方案4】：

试试这个

   $('input[type=button]').click( function() {
        $('div[class^=block]').hide(); // I resumed html block is div
        $(this).toggle();
});

【讨论】：

【解决方案5】：

不幸的是，我无法对其进行测试，但如果我记得正确，以下应该可以工作：

function toogleFunc(clickObject, toogleTarget, hideTarget)
{
  $(clickObject).click(function()
  {
    $(hideTarget).hide();
    $(toogleTarget).toggle();
  });
}

还有电话：

toogleFunc(
  ".btn_add_videos",
  ".block_videos", 
  ".block_event, .block_link, .block_photos"
);

到目前为止

【讨论】：

【解决方案6】：

假设每个按钮只有一个类，这样的事情应该可以工作。

var classNames = [ 'btn_add_event', 'block_link', 'block_photos', 'block_videos' ];

var all = '.' + classNames.join(', .'); // generate a jquery format string for selection

$(all).click( function() {

    var j = classNames.length;

    while(j--){
     if( this.className === classNames[j] ){

        var others = classNames.splice(j, 1); // should leave all classes but the one on this button

        $('.' + others.join(', .')).hide();
        $('.' + classNames[j]).toggle();

     }
    }
}

所有按钮都有相同的处理程序。当处理程序触发时，它会检查列表中的类之一的发送者。如果找到一个类，它会从剩余的类中生成一个 jquery 选择字符串并隐藏它们，并切换找到的那个。您可能需要进行一些检查以确保字符串生成正确。

【讨论】：

【解决方案7】：

这取决于您的 HTML 的结构。

假设你有这样的事情

<div class="area">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>
...
<div class="sender">
  <a class="one"></a>
  <a class="two"></a>
  <a class="three"></a>
</div>

您有一个由发送者和目标共享的类。

你的 js 应该是这样的：

$('.sender > a').click(function() {
  var target = $(this).attr('class');
  $('.area > .' + target).show().siblings().hide();
});

你显示你的真实目标并隐藏它的兄弟姐妹，这是不需要的。

【讨论】：

【解决方案8】：

如果您将类后缀放在一个数组中，您可以轻松地使此代码更具动态性。此代码假定调用切换或隐藏的顺序无关紧要。如果确实很重要，您只需记住（内部）循环内的正确类名，并在循环后切换该类。

这种方法的优点是您可以使用 exta 类扩展数组，而无需修改其余代码。

var classes = new Array('videos', 'event', 'link', 'photos');

for (var i = 0; i < classes.length; ++i)
{ 
    $('.btn_add_' + classes[i]).click( 
    function() 
    {
        for (var j = 0; j < classes.length; ++j)
        {
            if (this.hasClass('btn_add_' + classes[j]))
            {
                $('.block_' + classes[j]).toggle();
            }
            else
            {
                $('.block_' + classes[j]).hide();
            }
        }

    });
}

您可以通过不分配像btn_add_event 这样的元素类来使这段代码更优雅，而是给它们两个类：btn_add 和event，或者甚至给它们分配 id。我的解决方案基于您对当前 html 的描述。

【讨论】：

【解决方案9】：

我认为这是一个很好的灵活和高性能的功能。它假定您可以在父级中包含链接和 html 块，但否则它使用闭包来预先计算所涉及的元素，因此单击速度非常快。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>

<script type="text/javascript">

  // Enables show/hide functionality on click. 
  // The elements within 'container' matching the selector 'blocks' are hidden
  // When elements within 'container' matching the selector 'clicker' are clicked
  //  their attribute with the name 'clickerAttr' is appended to the selector 
  //  'subject' to identify a target, usually one of the 'blocks'. All blocks 
  //  except the target are hidden. The target is shown.
  // 
  // Change clickerAttr from 'linkTarget' to 'id' if you want XHTML compliance
  // 
  // container: grouping of related elements for which to enable this functionality
  // clicker: selector to element type that when clicked triggers the show/hide functionality
  // clickerAttr: name of the DOM attribute that will be used to adapt the 'subject' selector
  // blocks: selector to the html blocks that will be shown or hidden when the clicker is clicked
  // subject: root of the selector to be used to identify the one html block to be shown
  // 
  function initToggle(container,clicker,clickerAttr,blocks,subject) {

    $(container).each(
        function(idx,instance) { 
            var containerElement = $(instance);
            var containedBlocks = containerElement.find(blocks);    

            containerElement.find(clicker).each(function(idxC, instanceClicker) {

                var tgtE = containerElement.find(subject+instanceClicker.getAttribute(clickerAttr));
                var clickerBlocks = containedBlocks.not(tgtE);

                $(instanceClicker).click(function(event) { 
                    clickerBlocks.hide();
                    tgtE.toggle();
                });
            });

            // initially cleared
            containedBlocks.hide(); 
        }
    );
  }

  $(function() {

    initToggle('.toggle','a.link','linkTarget','div.block','div.');

  });
</script>

</head>
<body>

Example HTML block toggle:

<div class="toggle">
    <a href="javascript:;" linkTarget="A" class="link"> a </a> <br />
    <a href="javascript:;" linkTarget="B" class="link"> b </a> <br />
    <a href="javascript:;" linkTarget="C" class="link"> c </a> <br />
    <div class="A block">   A       </div>
    <div class="B block">   B       </div>
    <div class="C block">   C       </div>
</div> <!-- toggle -->

This next one is not enabled, to show scoping.

<div class="toggle2">
    <a href="javascript:;" linkTarget="A" class="link"> a </a> <br />
    <div class="A block">A</div>
</div> <!-- toggle2 -->

This next one is enabled, to show use in multiple positions on a page, such as in a portlet library.    

<div class="toggle">
    <a href="javascript:;" linkTarget="A" class="link"> a </a> <br />
    <div class="A block">A</div>
</div> <!-- toggle (2) -->

</body>
</html>

【讨论】：