javascript - 单击多个 div/id 时选择/激活的最大类数设置阈值

Question

我一直在研究“persay”技能树，但遇到了一个有趣的问题。

我的代码设置允许用户单击人才以显示已选择特定人才，最多 4 个人才。一旦你选择了 4 个天赋，你必须取消选择一个天赋才能选择另一个。

当我在同一页面上复制第二个天赋树的天赋树时，我的问题就来了(主要是为第二个英雄/职业或你队伍中的第二个党员)。我不知道如何在其他技能树上独立设置相同的“最多 4 个天赋的阈值”。发生的情况是它们在所有树中都共享相同的阈值。我试过分别制作单独的 id，甚至更改每个函数中的变量名。

var skillTotal = 0;
var skillSelected = 0;

$( "#selectable01>li.skill-slot" ).bind( "click", function ( e ) {
				var threshold = 4;
        var price = 1;
        if ($(this).hasClass('selected')) {
                skillTotal = skillTotal - 1;
                skillSelected--;
                $(this).toggleClass('selected');
        }
        else if (price + skillTotal <= threshold) {
                skillTotal = skillTotal + price;
                skillSelected++;
                $(this).toggleClass('selected');
        }
});

$( "#selectable02>li.skill-slot" ).bind( "click", function ( e ) {
				var threshold = 4;
        var price = 1;
        if ($(this).hasClass('selected')) {
                skillTotal = skillTotal - 1;
                skillSelected--;
                $(this).toggleClass('selected');
        }
        else if (price + skillTotal <= threshold) {
                skillTotal = skillTotal + price;
                skillSelected++;
                $(this).toggleClass('selected');
        }
});

/* NOT USING THIS CURRENTLY 
$( "#campSelectable>li.camp-slot" ).bind( "click", function ( e ) {
				var campThreshold = 3;
        var campPrice = 1;
        if ($(this).hasClass('selected')) {
                campTotal = campTotal - campPrice;
                selectedCamp--;
                $(this).toggleClass('selected');
        }
        else if (campPrice + campTotal <= campThreshold) {
                campTotal = campTotal + campPrice;
                selectedCamp++;
                $(this).toggleClass('selected');
        }
}); */

.skill-slot, .camp-slot{
  border:2px solid black;
  width:100px;
  margin: 5px;
  opacity: .4;
}

.skill-slot:hover, .camp-slot:hover {
  opacity: 1;
}

.raffle-slot.taken{
  background:red;
}
.selected{
  background: rgb(255, 128, 128);
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calc">
<ol class="roster" id="selectable01">
<li class="skill-slot">1</li>
<li class="skill-slot">2</li>
<li class="skill-slot">3</li>
<li class="skill-slot">4</li>
<li class="skill-slot">5</li>
<li class="skill-slot">6</li>
<li class="skill-slot">7</li>
</ol>

<ol class="roster" id="selectable02">
<li class="skill-slot">1</li>
<li class="skill-slot">2</li>
<li class="skill-slot">3</li>
<li class="skill-slot">4</li>
<li class="skill-slot">5</li>
<li class="skill-slot">6</li>
<li class="skill-slot">7</li>
</ol>

</div>

以下是我尝试过的: 最初我的标识符是:$( "#calc>ol>li.skill-slot").on 所以我开始添加额外的 id 以进一步深入研究并确保我的函数针对特定的 div，所以我转向了这个:$( "#calc>#selectable01>li.skill-slot").on 和 $( "#calc>#selectable02>li.skill-slot").上

我不想使用第二个 ID 的原因是因为我将使用附加到 #calc div 的模板有效地用新的名册替换当前名册。我也这样做是为了测试，看看我是否可以通过让它们成为自己的个人 ID 来解决问题，但这是行不通的。

Answer 1

使用事件委托(delegate)的一种更简单的方法。切换 .selected 以停用当前的 .skill-slot，或者在少于 4 个 .selected.skill-slot 时激活它在这个组中。

$('#selectable01, #selectable02').on('click', '.skill-slot', function(e){
  if($(this).hasClass('selected') || $('.selected.skill-slot', e.delegateTarget).length < 4){
    $(this).toggleClass('selected');
  }
});

.skill-slot, .camp-slot{
  border:2px solid black;
  width:100px;
  margin: 5px;
  opacity: .4;
}

.skill-slot:hover, .camp-slot:hover {
  opacity: 1;
}

.raffle-slot.taken{
  background:red;
}
.selected{
  background: rgb(255, 128, 128);
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calc">
<ol class="roster" id="selectable01">
<li class="skill-slot">1</li>
<li class="skill-slot">2</li>
<li class="skill-slot">3</li>
<li class="skill-slot">4</li>
<li class="skill-slot">5</li>
<li class="skill-slot">6</li>
<li class="skill-slot">7</li>
</ol>

<ol class="roster" id="selectable02">
<li class="skill-slot">1</li>
<li class="skill-slot">2</li>
<li class="skill-slot">3</li>
<li class="skill-slot">4</li>
<li class="skill-slot">5</li>
<li class="skill-slot">6</li>
<li class="skill-slot">7</li>
</ol>

</div>