在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跳轉。這是一個很好的教程，它展示了使客戶端代碼快速簡單的所有技巧。