Fatal编程技术网
  • javascript/
  • 如何缩短这个过长的JavaScript函数？

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

javascript

如何缩短这个过长的JavaScript函数？,javascript,Javascript,我有一个简单的脚本，它选择一个类的，并向其中添加一个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(

我有一个简单的脚本，它选择一个类的，并向其中添加一个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>
选项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');
        }
    });
})();
选项#2是为所有链接设置相同的事件处理程序（更好：使用委派事件），并获取应该动态删除类的同级链接。其代码取决于您的DOM设置

好的，现在我看到了您的dom，我还有一些额外的要点

  • 这些课真的没用。您似乎使用来标识一个元素，该元素已由其
    id
    标识为唯一。使用（相同）
    class=“adv option set”
    对它们进行分类

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

  • 我不确定，但你真的应该看看传统的单选按钮来构建你的表单。完成后，您可以使用一些JavaScript对其进行增强
选项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');
        }
    });
})();
选项#2是为所有链接设置相同的事件处理程序（更好：使用委派事件），并获取应该动态删除类的同级链接。其代码取决于您的DOM设置

好的，现在我看到了您的dom，我还有一些额外的要点

  • 这些课真的没用。您似乎使用来标识一个元素，该元素已由其
    id
    标识为唯一。使用（相同）
    class=“adv option set”
    对它们进行分类

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

  • 我不确定，但你真的应该看看传统的单选按钮来构建你的表单。完成后，您可以使用一些JavaScript对其进行增强
您可以在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');
   }

}
我希望这会有所帮助，这被称为“属性开始与选择器”，下面是供您查看的参考链接：

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

感谢Ankur

您可以在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');
   }

}
我希望这会有所帮助，这被称为“属性开始与选择器”，下面是供您查看的参考链接：

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

谢谢Ankur是的。但首先，代码没有意义。你说“否则取消选择全部，只选择这一个”，但实际上你是取消选择这一个，然后重新选择它。因此，首先，给所有的类指定一个通用的类名。然后，使用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
        }
    }
});
嗯。但首先，代码没有意义。你说“否则取消选择全部，只选择这一个”，但实际上你是取消选择这一个，然后重新选择它。因此，首先，给所有的类指定一个通用的类名。然后，使用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
        }
    }
});
请给我们看看DOM好吗？为什么有不同的类名。为什么没有相同的类名但不同的ID呢？看看我更新的答案。这是最好的方法。你能给我们看看DOM吗？为什么你有不同的类名。为什么没有相同的类名但不同的ID呢？看看我更新的答案。这是最好的方法。这不是我们想要做的吗？不，代码将类移动到单击的元素，它不会切换它。谢谢，这段代码工作得很好@但是，由于他的代码行数较少，所以Cravro的代码也工作得很好，这是否意味着他的方法更好？或者是因为某种原因还是什么？我不完全确定如何知道该使用哪一个/：谢谢！：）不，它做不同的事情（从所有组中删除选择），效率也较低。不，他的代码从所有过滤器中删除选择。使用我的，你可以选择定制的桶，去台面，选择大理石的，并且在返回桶时仍然选择定制的过滤器。这不是我们要做的吗？不，代码将类移动到单击的元素，它不会切换它。谢谢，这段代码工作得很好@但是，由于他的代码行数较少，所以Cravro的代码也工作得很好，这是否意味着他的方法更好？或者是因为某种原因还是什么？我不完全确定如何知道该使用哪一个/：谢谢！：）不，它做不同的事情（从所有组中删除选择），效率也较低。不，他的代码从所有过滤器中删除选择。使用我的，你可以选择定制的浴盆，去工作台，选择大理石的浴盆，并且在返回浴盆时仍然选择定制过滤器。这个类不应该没有起始点吗？这个方法类似于Cravro的，他的工作非常完美。非常感谢你，不用担心。在类名前面，我假设它的工作原理与他的相同。谢谢！：）是啊，对不起，我没有测试它，我只是把它写得很简单，这样他就可以得到整体的想法。我会更新的，谢谢你让我知道。这个类不应该没有起始点吗？这个方法类似于Cravo的，他的工作非常好。非常感谢你，不用担心。在类名前面，我假设它的工作原理与他的相同。谢谢！：）是啊，对不起，我没有测试它，我只是把它写得很简单，这样他就可以得到整体的想法。我会更新的，谢谢你让我知道。@mplungjan不，不是真的。如果他希望在每次单击按钮时切换类，则切换将非常有效，但如果按钮已被选中，则他希望保持不变。所以你可以使用切换，但它实际上会使解决方案更复杂，啊，确切地说。。您可以看到脚本正在运行，它将出现问题 
$('[class^=adv-option-set] a').click(
    function()
    {
       $(this).addClass('selected');
       $('[class^=adv-option-set] a').not(this).removeClass('selected');
    }
);