在单击多个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" ).on

我不想以第二个 ID 为目标的原因是，我将使用附加到 #calcdiv 的模板，有效地将当前名单替换为新名单。我还这样做是为了测试，看看我是否可以通过将它们设为自己的个人 ID 来解决问题，这不起作用。

Answer 1

一种使用事件委派的更简单的方法。切换.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>

Answer 2

当您对计数和总计使用全局变量时，这显然会导致全局限制。若要使每个组的本地限制，可以使用这些ol元素的数据属性，以便它们彼此独立工作。通过其他一些小改进，您的代码可能如下所示：

$("#selectable01, #selectable02").data("skillTotal", 0).data("skillSelected", 0);
$("#selectable01>li.skill-slot,#selectable02>li.skill-slot").on("click", function () {
var threshold = 4, 
price = 1,
sign = $(this).hasClass('selected') ? -1: 1,
$p = $(this).parent(),
newPrice = $p.data("skillTotal") + sign*price;
if (newPrice > threshold) return; 
$p.data("skillTotal", newPrice)
.data("skillSelected", $p.data("skillSelected") + sign);
$(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>

Answer 3

您将skillSelected存储在事件处理程序之外，以便每个事件处理程序都读取该变量。您可能需要获取每次触发事件处理程序时选择的运行总数。