javascript - 为什么我的按钮会增加错误的变量？

Question

对 Javascript/jquery 非常陌生。我已经盯着这个问题看了好几天了，但我无法弄清楚。出于练习，我正在制作一款游戏，你可以将统计数据分配给你的 Angular 色。我可以进行第一个统计，值发生变化，控制台日志会显示它。然而，所有其他按钮仅增加第一个统计数据。我知道 bool 逻辑是如何工作的，我尝试用我在 Python 和 C++ 中学到的知识来复制它，但由于逻辑被破坏或代码选择了错误的变量，我似乎遗漏了一些东西。

var PTS = 20;
var strength = 5;
var agility = 5;
var constitution = 5;

function points_append(){
    PTS = PTS - 1;
    console.log("Clicked $(#PTS_append), Total Points =", PTS);
    $("#total_points").text(PTS); 

    if ($("#PTS_append").hasClass("strength")) {
        strength = strength + 1;
        console.log("Added point to STRENGTH:", strength);
        $("#strength").text(strength);
    }

    else if ($("#PTS_append").hasClass(".agility")) {
        agility = agility + 1;
        console.log("Added point to AGILITY:", agility);
        $("#agility").text(agility);
    }
}

function points_remove(){
    PTS = PTS + 1;
    console.log("Clicked $(#PTS_remove), Total Points =", PTS);
    $("#total_points").text(PTS);

    if ($("#PTS_remove").parent("#parent_strength")) {
        strength = strength - 1;
        console.log("Removed point from STRENGTH:", strength);
        $("#strength").text(strength);
    }


    else if ($("#PTS_remove").parent("#parent_agility")) {
        agility = agility - 1;
        console.log("Removed point from AGILITY:", agility);
        $("#agility").text(agility);
    }
}

正如你所看到的，我已经尝试了 .parent 和 .hasClass 等。巧合的是，这是我在这里的第一篇文章，所以这里什么也没有。我也在谷歌上来回搜索了这个问题，但还没有找到接近答案的地方。我希望这里有人可以帮助我。

编辑:这就是 HTML 的外观。

<div class = "stats_allocation">

            <table>
            <tr>
                <th>Available PTS:</th>
                <td id = "total_points">20</td>
            </tr>
            <tr id = "parent_strength">
                <th>Strength:</th> 
                <td id="strength">5</td> 
                <td>
                    <button class = "strength" id = "PTS_append" onClick="points_append()">+</button>
                    <button class = "strength" id = "PTS_remove" onClick="points_remove()">-</button>
                </td>
            </tr>

            <tr id = "parent_agility">
                <th>Aglity:</th> 
                <td id="agility">5</td> 
                <td>
                    <button class = "agility" id = "PTS_append" onClick="points_append()">+</button>
                    <button class = "agility" id = "PTS_remove" onClick="points_remove()">-</button>
                </td>
            </tr>

            <tr id = "parent_constitution">
                <th>Constitution:</th> 
                <td id="constitution">5</td> 
                <td>
                    <button class = "constitution" id = "PTS_append" onClick="points_append()">+</button>
                    <button class = "constitution" id = "PTS_remove" onClick="points_remove()">-</button>
                </td>
            </tr>

            </table>

        </div>

Answer 1

几个问题:

• id='' 在 HTML 中只能出现一次。使用 $("#id") 将始终找到第一个，因此您需要找到与按下的按钮相关的那个
• .hasClass 在没有类指示符的情况下使用
• .parent() 只会查看上面的节点(因此对于按钮，它将找到 td) - 您可以使用 .parents() 或 .closest() - 或者像以前一样使用 .hasClass。

当您使用onclick=func时，您可以使用onclick=func(this)传递按钮，然后使用functionfund(btn).

如果您使用 jquery $("btn").on("click", function... 那么按钮将被定义为 this 。

更新的代码:

var PTS = 20;
var strength = 5;
var agility = 5;
var constitution = 5;

function points_append(btn) {
  PTS = PTS - 1;
  console.log("Clicked $(#PTS_append), Total Points =", PTS);
  $("#total_points").text(PTS);

  if ($(btn).hasClass("strength")) {
    strength = strength + 1;
    console.log("Added point to STRENGTH:", strength);
    $("#strength").text(strength);
  } else if ($(btn).hasClass("agility")) {
    agility = agility + 1;
    console.log("Added point to AGILITY:", agility);
    $("#agility").text(agility);
  }
}

function points_remove(btn) {
  PTS = PTS + 1;
  console.log("Clicked $(#PTS_remove), Total Points =", PTS);
  $("#total_points").text(PTS);

  if ($(btn).closest("#parent_strength").length > 0) {
    strength = strength - 1;
    console.log("Removed point from STRENGTH:", strength);
    $("#strength").text(strength);
  } else if ($(btn).closest("#parent_agility").length > 0) {
    agility = agility - 1;
    console.log("Removed point from AGILITY:", agility);
    $("#agility").text(agility);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stats_allocation">

  <table>
    <tr>
      <th>Available PTS:</th>
      <td id="total_points">20</td>
    </tr>
    <tr id="parent_strength">
      <th>Strength:</th>
      <td id="strength">5</td>
      <td>
        <button class="strength" onClick="points_append(this)">+</button>
        <button class="strength" onClick="points_remove(this)">-</button>
      </td>
    </tr>

    <tr id="parent_agility">
      <th>Aglity:</th>
      <td id="agility">5</td>
      <td>
        <button class="agility" onClick="points_append(this)">+</button>
        <button class="agility" onClick="points_remove(this)">-</button>
      </td>
    </tr>

    <tr id="parent_constitution">
      <th>Constitution:</th>
      <td id="constitution">5</td>
      <td>
        <button style='display:none;' class="constitution" onClick="points_append(this)">+</button>
        <button style='display:none;' class="constitution" onClick="points_remove(this)">-</button>
      </td>
    </tr>

  </table>

</div>

为了使其更加“jquery-y”(并安抚纯粹主义者)，请不要在 html 中添加事件处理程序，更新的代码片段:

$("button.add").on("click", points_append);
$("button.remove").on("click", points_remove);

var PTS = 20;
var strength = 5;
var agility = 5;
var constitution = 5;

function points_append() {
  PTS = PTS - 1;
  console.log("Clicked $(#PTS_append), Total Points =", PTS);
  $("#total_points").text(PTS);

  if ($(this).hasClass("strength")) {
    strength = strength + 1;
    console.log("Added point to STRENGTH:", strength);
    $("#strength").text(strength);
  } else if ($(this).hasClass("agility")) {
    agility = agility + 1;
    console.log("Added point to AGILITY:", agility);
    $("#agility").text(agility);
  }
}

function points_remove(btn) {
  PTS = PTS + 1;
  console.log("Clicked $(#PTS_remove), Total Points =", PTS);
  $("#total_points").text(PTS);

  if ($(this).closest("#parent_strength").length > 0) {
    strength = strength - 1;
    console.log("Removed point from STRENGTH:", strength);
    $("#strength").text(strength);
  } else if ($(this).closest("#parent_agility").length > 0) {
    agility = agility - 1;
    console.log("Removed point from AGILITY:", agility);
    $("#agility").text(agility);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stats_allocation">

  <table>
    <tr>
      <th>Available PTS:</th>
      <td id="total_points">20</td>
    </tr>
    <tr id="parent_strength">
      <th>Strength:</th>
      <td id="strength">5</td>
      <td>
        <button class="strength add">+</button>
        <button class="strength remove">-</button>
      </td>
    </tr>

    <tr id="parent_agility">
      <th>Aglity:</th>
      <td id="agility">5</td>
      <td>
        <button class="agility add">+</button>
        <button class="agility remove">-</button>
      </td>
    </tr>

  </table>

</div>

还可以进行其他改进，例如使用适合您能力的对象以及添加/删除任何属性的单一方法(通过在按钮容器上定义属性)，这将大大减少您的代码并使其更可重用。但这是一个好的开始。