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

Question

因此，我正在研究一个危险的Web应用程序，并且我有一部分应用程序，玩家可以根据需要创建尽可能多的团队并给他们一个自定义名称。上述

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

减去点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和$这个选择器来处理你想要的单个团队。我在下面的代码片段中添加了一些注释。只需运行该代码段几次，查看评论即可了解如何选择团队。

$(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跳转。这是一个很好的教程，它展示了使客户端代码快速简单的所有技巧。