Question

所以我正在研究一个危险的网络应用程序，我有一部分应用程序，玩家可以根据需要创建尽可能多的团队，并为他们提供自定义名称。

HTML

<!--Score Boards-->
        <div id="teamBoards">
                <div id="teams">

                </div>
                <div id="addTeams">
                    <h3>Add Teams</h3>
                    <input type="text" placeholder="Enter Team Name" id="teamName">
                    <button id="addTeam">Add a Team</button>
                </div>
        </div>

JS

var div = document.createElement("div");
    div.className = "Teams"
    var teamNameElement = document.createElement("h3");
    var teamName = $('#teamName').val();
    teamNameElement.textContent = teamName;
    var score = document.createElement("h4");
    score.textContent = "0";
    score.id = "score"+teamName;
    score.className = "score";
    var plusButton = document.createElement("button");
    plusButton.textContent = "+";
    plusButton.id = "plus"+teamName;
    plusButton.className = "plus";
    var minusButton = document.createElement("button");
    minusButton.textContent = "-";
    minusButton.id = "minus"+teamName;
    minusButton.className = "minus";
    div.appendChild(teamNameElement);
    div.appendChild(score);
    div.appendChild(plusButton);
    div.appendChild(minusButton);
    var placementDiv = document.getElementById('teams');
    placementDiv.appendChild(div);

上面的代码会创建一个团队名称，一个有0个预设的分数的位置，以及一个点的加号和减号按钮。

当我将点数加100或减去100时，我开始遇到麻烦。

JS

$(plusButton).on('click', add);
    $(minusButton).on('click', minus);

    function add(){
        var score1 = $('.score').html();
        console.log(score1);
        score1 = Number(score1);
        score1 = score1 + 100;
        console.log(score1);
        $(score).html(score1);
    }

    function minus(){
        var score1 = $('.score').html();
        score1 = Number(score1);
        score1 = score1 - 100;
        $(score).html(score1);
    }

这里的所有代码都在一个函数中，因此加号和减号函数中的一些变量可能是上面代码中的变量。问题是我无法通过每个团队得分的特定ID为特定团队的记分板添加积分。

Answer 1

这是一种方法，您可以使用更多jQuery和$ this选择器来处理您想要的各个团队。我在下面的代码段中添加了一些注释。只需运行几次代码片段并查看评论，看看如何选择团队。

$(function(){
    var teamCount = 0;
    var $teamsDiv = $("#teams");

    $("#addTeam").click(function(){
        //get the team name value
        var teamName = $("#teamName").val();
        
        //Create clone of html team template
        var $newTeam = $("#teamTemplate").clone();
        //Set an id for each team using the teamCount var
        $newTeam.attr("id", "team" + teamCount);
        //Set the entered text
        $newTeam.find(".teamName").text(teamName);
        //Set the score to zero
        $newTeam.find(".score").text("0");
        
        //Append new team to teams div
        $teamsDiv = $("#teams");
        $teamsDiv.append($newTeam.html());
    });

    
    //Add button press (using $("#teams").on('click'... allows for setting
    //listeners on dynamically created html 
    $("#teams").on('click', '.plusButton', function() {
      var $teamTemplate = $(this).closest(".template");
      var $score = $teamTemplate.find(".score");
      var teamName = $teamTemplate.find(".teamName").text();
      var currentScore = parseInt($score.text());
      $score.text(currentScore + 100);
      
       $(this).closest(".template").find(".teamName");
      console.log(teamName + " Score: " + $score.text());
    })
    //Minus button press
    $("#teams").on('click', '.minusButton', function() {
      //Using the "this" selector edit just the div you want.
      var $teamTemplate = $(this).closest(".template");
      var $score = $teamTemplate.find(".score");
      var teamName = $teamTemplate.find(".teamName").text();
      var currentScore = parseInt($score.text());
      //Set new score text
      $score.text(currentScore - 100);
      
      //Console.log just to see what is happening
       $(this).closest(".template").find(".teamName");
      console.log(teamName + " Score: " + $score.text());
    })
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Score Boards-->
<div id="teamBoards">
    
    <div id="addTeams">
        <h3>Add Teams</h3>
        <input type="text" placeholder="Enter Team Name" id="teamName">
        <button id="addTeam">Add a Team</button>
    </div>
    <br />
    <div id="teams">

    </div>
</div>

<div style="display:none;" id="teamTemplate"  >
  <div class="template">
    <span class="teamName"></span>
    <button class="plusButton" type="button">+</button>
    <button class="minusButton">-</button>
    &nbsp;
    <span class="score">0</span>
    <br />
  </div>
</div>

我强烈建议使用Jquery video tutorial来使用jQuery。这是一个很棒的教程，它展示了使客户端代码快速简便的所有技巧。

javascript创建的元素中的自定义ID

1 个答案: