Question

我一直在研究一个技能树“坚持不懈”。我遇到了一个有趣的问题。

我的代码设置允许用户点击一个人才来表明已经选择了特定人才，最多可以选择4个人才。一旦你选择了4个天赋，你必须取消选择一个才能来选择不同的天赋。

当我在同一页面上复制第二个天赋树的天赋树时，我的问题就出现了（对于第二个英雄/班级或者你们党派中的第二个党员）。我无法弄清楚如何制作最多4个天赋的相同阈值＆＃39;在其他技能树上独立。会发生的是，它们在所有树上都具有相同的阈值。我尝试过各自创建单独的id，甚至更改每个函数中的变量名。

＆＃13;

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');
        }
}); */

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

以下是我尝试的内容：最初我的标识符为：$( "#calc>ol>li.skill-slot" ).on所以我开始添加其他ID以进一步向下钻取并确保我的功能定位到特定的div，所以我转到此：$( "#calc>#selectable01>li.skill-slot" ).on和$( "#calc>#selectable02>li.skill-slot" ).on

我没有想要定位第二个ID的原因是因为我将使用附加到#calc div的模板，有效地用新的名称替换当前的名单。我也做了这个测试，看看我是否可以通过让他们成为他们自己的个人身份来解决问题，但这并不起作用。

Answer 1

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

＆＃13;

$("#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');
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用事件委派的一种更简单的方法。切换.selected以停用当前.skill-slot，或者如果此组中的.selected.skill-slot少于4 $('#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>

reshape, crop = {
1: ((1952, 3264), (1944, 3240)),
2: ((2480, 4128), (2464, 4100)),
}

Answer 3

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

在点击多个div / id＆＃39; s

3 个答案: