Question

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

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

$('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>

这个小提琴显示了我在使用代码http://jsfiddle.net/MarKP/32/

的位置

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

我正在尝试使用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已经过时了。实际上近十年了。您需要对其进行更新。

限制父div中的可选div

1 个答案: