Question

我正在研究一个简单的选择，它将选择项添加类，并在满足规则的情况下将其从其他元素中删除。

代码运行良好，我只需要一个较短的版本，因为我不得不在其他页面上使用相同的代码，这些页面具有不同的要求，例如活动类的最大数量和选择数量。

我对要转换的代码部分添加注释。

谢谢，希望你能帮助我。

$('ul li a').click(function() {
  if($(this).hasClass('active')){
    $(this).removeClass('active');
  }else{
    $(this).addClass('active');
  }
    var arr = [];
    var val = parseInt($(this).text().replace(/\s/g, ''));

    $('ul li').each(function(i) {
        if ($(this).find('a').hasClass('active')) {
            arr.push(i + 1);
        }
    });
    if (arr.length > 3) {
        if (arr.includes(val)) {
            if (val > arr[2]) {
                $('ul li:nth-child(' + arr[0] + ') a').removeClass('active');
                removeArrItem(arr[0]);
            } else {
             // shortened this part 
              if (val < arr[1]) {
                $('ul li:nth-child(' + arr[1] + ') a').removeClass('active');
                removeArrItem(arr[1]);
            } else if (val < arr[2]) {
                $('ul li:nth-child(' + arr[2] + ') a').removeClass('active');
                removeArrItem(arr[2]);
            } else if (val < arr[3]) {
                $('ul li:nth-child(' + arr[3] + ') a').removeClass('active');
                removeArrItem(arr[3]);
            }
              
            }
        }
    }

    function removeArrItem(item) {
        var index = arr.indexOf(item);
        if (index > -1) {
            arr.splice(index, 1);
        }
    }

});

ul{
  padding: 0;
}
ul li{
  float: left;
  list-style-type: none;
}
ul li a{
  text-decoration: none;
  color: #333;
  padding: 10px  15px;
  background-color: #DDD;
  margin: 5px;
  border-radius: 100px;
}
ul li a.active{
  background-color: green;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
</ul>

Answer 1

如果我是您，那么我不仅会缩短代码，还会尝试使其更加通用。例如，您可以使用变量来保存索引和最大索引（以提高可读性并使其更易于移植代码），然后使用循环和if语句。

例如：

var index = 0, max_index = 3;
while (index < arr.length && index <= max_index + 1 && val >= arr[index]) {
    index++;
}
if (i <= max_index) {
    $('ul li:nth-child(' + arr[index] + ') a').removeClass('active');
    removeArrItem(arr[index]);
}

由于数组是通过引用传递的，因此您可以轻松地将其包装在函数中：

function doSomething(arr, max_index)
{
    var index = 0;
    while (index < arr.length && index <= max_index + 1 && val >= arr[index]) {
        index++;
    }
    if (i <= max_index) {
        $('ul li:nth-child(' + arr[index] + ') a').removeClass('active');
        removeArrItem(arr[index]);
    }   
}

然后您只需要使用数组和所需的停止点来调用它。更好的是，您可以添加第三个参数，该参数带有一个回调，该回调采用需要使用的索引，如下所示：

function doSomething(arr, max_index, callback) {
    var index = 0;
    while (index < arr.length && index <= max_index + 1 && val >= arr[index]) {
        index++;
    }
    if (i <= max_index) {
        callback(index);
    }
}

然后，您可以通过每次传递所需的函数来更轻松地重用它（即使所需的行为随时间变化，这也使您可以使用完全相同的函数）：

doSomething(arr, 3, function (index) {
    $('ul li:nth-child(' + arr[index] + ') a').removeClass('active');
    removeArrItem(arr[index]);
});

Answer 2

您的完整代码可以按如下所示最小化。

您可以使用toggleClass来add/remove active类。

您可以轻松地循环访问active之类的a $('ul li a.active')个元素。

findIndex将返回当前选定元素的索引，您可以从active a元素列表中删除第一个元素的下一个。

$('ul li a').click(function() {
  $(this).toggleClass('active');
  
  var totalActive = $('ul li a.active').length;
  if (totalActive > 3) {
    var text = $(this).text();
    
    var index = $('ul li a.active').toArray().findIndex(function(i) {
      return $(i).text() == text;
    });

    index = index + 1 < totalActive ? index + 1 : 0;
    $('ul li a.active:nth(' + index + ')').removeClass('active');
  }
});

ul {
  padding: 0;
}

ul li {
  float: left;
  list-style-type: none;
}

ul li a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  background-color: #DDD;
  margin: 5px;
  border-radius: 100px;
}

ul li a.active {
  background-color: green;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
</ul>

使功能重复代码

2 个答案: