javascript - 如何缩短这个过长的 JavaScript 函数？

Question

我有一个简单的脚本，它选择一个类并向其添加一个 selected 类，并将其从所有其他具有相似类的类中删除。这一切都很完美，但我知道必须有更好的方法来写出来，我就是想不通..它涉及到这样的事情吗？

$('.adv-option-set a, .adv-option-set2 a, .adv-option-set3 a, .adv-option-set4 a, .adv-option-set5 a, .adv-option-set6 a, .adv-option-set7 a').click(function()
{
    // if clicked item is selected then do nothing
    if ($(this).hasClass('selected')){}

    // otherwise deselect all and select just this one
    else
    {
        $('.adv-option-set a').removeClass('selected');
        $(this).addClass('selected');
    }

    {
        $('.adv-option-set2 a').removeClass('selected');
        $(this).addClass('selected');
    }

    {
        $('.adv-option-set3 a').removeClass('selected');
        $(this).addClass('selected');
    }
});

所以这是我目前拥有并且正在工作的代码：

$('.adv-option-set a').click(function()
{
    // if clicked item is selected then do nothing
    if ($(this).hasClass('selected')){}

    // otherwise deselect all and select just this one
    else
    {
        $('.adv-option-set a').removeClass('selected');
        $(this).addClass('selected');
    }
});

$('.adv-option-set2 a').click(function()
{
    // if clicked item is selected then do nothing
    if ($(this).hasClass('selected')){}

    // otherwise deselect all and select just this one
    else
    {
        $('.adv-option-set2 a').removeClass('selected');
        $(this).addClass('selected');
    }
});

$('.adv-option-set3 a').click(function()
{
    // if clicked item is selected then do nothing
    if ($(this).hasClass('selected')){}

    // otherwise deselect all and select just this one
    else
    {
        $('.adv-option-set3 a').removeClass('selected');
        $(this).addClass('selected');
    }
});

等等直到'.adv-option-set7 a'

编辑以显示 DOM：

      <article id="filter">
        <ul id="filter-nav" class="option-set">
          <li>Filter: </li>
          <li><a data-categories="*" data-subid="all" class="selected">All</a></li>
          <li><a data-categories="tubs-and-showers" data-subid="tubs-and-showers">Tubs &amp; Showers</a></li>
          <li><a data-categories="countertops" data-subid="countertops">Countertops</a></li>
          <li><a data-categories="faucets" data-subid="faucets"><s>Faucets</s></a></li>
          <li><a data-categories="cabinetry" data-subid="cabinetry"><s>Cabinetry</s></a></li>
          <li><a data-categories="flooring" data-subid="flooring"><s>Flooring</s></a></li>
          <li><a data-categories="toilets" data-subid="toilets"><s>Toilets</s></a></li>
          <li><a data-categories="accessories" data-subid="accessories"><s>Accessories</s></a></li>
        </ul>
        <div id="advfilter" class="advfilter filter-nav hidden">
          <ul id="tubs-and-showers" class="adv-option-set1">
            <li><span class="small">ADV</span> Filter: </li>
            <li><a data-categories="modular">Modular</a></li>
            <li><a data-categories="custom">Custom</a></li>
          </ul>
          <ul id="countertops" class="adv-option-set2">
            <li><span class="small">ADV</span> Filter: </li>
            <li><a data-categories="marble">Marble</a></li>
            <li><a data-categories="solid-surface">Solid Surface</a></li>
            <li><a data-categories="laminate"><s>Laminate</s></a></li>
            <li><a data-categories="granite"><s>Granite</s></a></li>
          </ul>
          <ul id="faucets" class="adv-option-set3">
            <li><span class="small">ADV</span> Filter: </li>
            <li><a data-categories="">Coming Soon</a></li>
            <li><a data-categories="">Coming Soon</a></li>
          </ul>
          <ul id="cabinetry" class="adv-option-set4">
            <li><span class="small">ADV</span> Filter: </li>
            <li><a data-categories="">Coming Soon</a></li>
            <li><a data-categories="">Coming Soon</a></li>
          </ul>
          <ul id="flooring" class="adv-option-set5">
            <li><span class="small">ADV</span> Filter: </li>
            <li><a data-categories="">Coming Soon</a></li>
            <li><a data-categories="">Coming Soon</a></li>
          </ul>
          <ul id="toilets" class="adv-option-set6">
            <li><span class="small">ADV</span> Filter: </li>
            <li><a data-categories="">Coming Soon</a></li>
            <li><a data-categories="">Coming Soon</a></li>
          </ul>
          <ul id="accessories" class="adv-option-set7">
            <li><span class="small">ADV</span> Filter: </li>
            <li><a data-categories="">Coming Soon</a></li>
            <li><a data-categories="">Coming Soon</a></li>
          </ul>
        </div>
      </article>

最终编辑：这是我拥有的 JS 代码的另一部分，但您的答案似乎实际上也使这部分生效：

    $("#advfilter ul").hide();
    $('.option-set a').on('click', function() {
        $("#advfilter ul").hide();
        $("#advfilter").removeClass('hidden');
        $("#" + $(this).attr('data-subid')).show();
        /*location.href='#filter'*/
    });

    $('.option-set a').click(function()
    {
        // if clicked item is selected then deselect it
        if ($(this).hasClass('selected'))
        {
           $('.adv-option-set1 a').removeClass('selected');
           $('.adv-option-set2 a').removeClass('selected');
           $('.adv-option-set3 a').removeClass('selected');
           $('.adv-option-set4 a').removeClass('selected');
           $('.adv-option-set5 a').removeClass('selected');
           $('.adv-option-set6 a').removeClass('selected');
           $('.adv-option-set7 a').removeClass('selected');
        }

        // otherwise deselect all and select just this one
        else
        {
           $('.option-set a').removeClass('selected');
           $(this).addClass('selected');
           $('.adv-option-set1 a').removeClass('selected');
           $('.adv-option-set2 a').removeClass('selected');
           $('.adv-option-set3 a').removeClass('selected');
           $('.adv-option-set4 a').removeClass('selected');
           $('.adv-option-set5 a').removeClass('selected');
           $('.adv-option-set6 a').removeClass('selected');
           $('.adv-option-set7 a').removeClass('selected');
        }
    });

score 3 · Accepted Answer

选项 #1 将是一个简单的循环：

for (var i=1; i<=7; i++) (function(){
    var links = $('.adv-option-set'+i+' a');
    links.click(function() {
        var $this = $(this);
        if (!$this.hasClass('selected')) { // could be left out
            links.removeClass('selected');
            $this.addClass('selected');
        }
    });
})();

请注意，此代码不会删除任何类，因为您对.adv-option-set3(" ...then deselect it ") 的注释（不是代码）暗示，当项目已被选中时，它“什么都不做”。如果要启用删除类，您可能希望在处理程序中使用此代码段：

if ($(this).toggleClass('selected').hasClass('selected'))
    links.not(this).removeClass('selected');

选项 #2 是为所有链接设置相同的事件处理程序（更好：使用委托事件）并获取应动态删除类的同级链接。此代码取决于您的 DOM 设置。

好的，既然我看到了你的 dom，我还有一些额外的观点。

上课真的没用。您似乎使用来标识一个元素 - 它已经由其唯一标识id。对它们都使用（相同的）来对class="adv-option-set"它们进行分类。

选项 #2 的代码 - 既优雅又高效 - 将如下所示：

$("#advfilter").on("click", "a", function(e) {
    $(this).addClass('selected')
      .closest(".adv-option-set").find("a").not(this).removeClass('selected');
});
// or, little better but tightier bound to the DOM:
$("#advfilter").on("click", "a", function(e) {
    $(this).addClass('selected')
      .parent().siblings().find("a").removeClass('selected');
});

我不确定，但你真的应该看看传统的单选按钮来构建你的表单。完成后，您可以使用一些 JavaScript 对其进行增强。

score 3 · Accepted Answer

$('[class^=adv-option-set] a').click(
    function()
    {
       $(this).addClass('selected');
       $('[class^=adv-option-set] a').not(this).removeClass('selected');
    }
);

score 1 · Accepted Answer

是的。但首先，代码没有意义。您说“否则取消选择全部并仅选择这个”，但实际上您是在取消选择这个然后重新选择它。所以首先，给他们一个共同的类名。然后，使用 jQuery，您可以执行以下操作：

$(".commonClassName").each(function(index, item){
    item.click(function(){
        $(".commonClassName").removeClass('selected');  //no matter what, deselect all of them
        if(!item.hasClass('selected'))
        {
            item.addClass('selected');  //then select this one if it isn't already
        }
    }
});

score 0 · Accepted Answer

您可以在 jQuery 中使用开头，如下所示：

$('div[class^="adv-option-set"] a').click(function()
{

   // if clicked item is selected then do nothing
   if ($(this).hasClass('selected'))
   {
   }else
   {
     $('div[class^="adv-option-set"] a').removeClass('selected');
     $(this).addClass('selected');
   }

}

我希望这会有所帮助，这被称为属性以选择器开头，下面是参考链接供您查看： http ://api.jquery.com/attribute-starts-with-selector/

这是我认为最短的代码，我在跳跃

谢谢 Ankur

javascript - 如何缩短这个过长的 JavaScript 函数？

4 回答 4

Related

Reference