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

我有一个简单的脚本，用于选择一个类并将其添加到所选类，并将其从具有类似类的所有其他类中删除。一切都很好，但是我知道必须有更好的方法来写出来，我只是想不起来。它涉及这样的东西吗？

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

最佳答案

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

关于javascript - 如何缩短这个过长的JavaScript函数？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11782301/