javascript - 限制父 div 中的可选 div

Question

我想创建一个产品功能选择页面，用户需要从 6 个功能中选择 3 个功能。现在，我可以限制可选元素的数量，因此如果选择了 3 个元素，则用户将无法选择第四个。

我需要对此进行修改，以便当用户尝试选择第四个元素时，他们选择的第一个元素将变为未选中状态，而第四个元素将被选中。我希望这是有道理的。

$('div').click(function(e) {
  var $et = $(e.target);
  if ($et.hasClass('fill')) {
    $et.removeClass('fill');
  } else {
    if ($('.fill').length < 2) {
      $et.addClass('fill');
    }
  }
});

div {
  border: 1px solid blue;
  height: 25px;
  margin-bottom: 5px;
}

.fill {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="1">one</div>
<div id="2">two</div>
<div id="3">three</div>
<div id="4">four</div>

这个 fiddle 显示了我的代码所在的位置:http://jsfiddle.net/MarKP/32/

这个 fiddle 不是我的，但这正是我项目中现在拥有的。

我正在尝试使用 jQuery 或纯 JavaScript 来完成此操作。

提前谢谢您!

Answer 1

要实现此目的，您可以维护一个数组，其中保存元素被单击的顺序。然后，当达到限制时，您可以从首先选择的元素中删除该类。试试这个:

var selections = [];

var $div = $('div').click(function(e) {
  selections.push(this.id);
  if (selections.length > 3)
    selections.shift(); // remove first item
    
  setState();
});

function setState() {
  $div.removeClass('fill');
  $div.filter(`#${selections.join(',#')}`).addClass('fill');
}

div {
  border: 1px solid blue;
  height: 25px;
  margin-bottom: 5px;
}

.fill {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1">one</div>
<div id="2">two</div>
<div id="3">three</div>
<div id="4">four</div>
<div id="5">five</div>
<div id="6">six</div>

最后，请注意 jQuery 1.4.4 已经严重过时了；事实上近10年了。您需要更新它。