Question

Javascript / jquery的新手。我已经盯着这几天了，我想不通。出于实践，我正在制作一款游戏，您在其中向角色分发统计数据。我可以进行第一个统计，值会更改，控制台日志会显示它。但是，所有其他按钮只会增加第一个统计信息。我知道布尔逻辑是如何工作的，我试图用在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)然后再使用function fund(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>

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

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

1 个答案: