如何停止将值应用到仅更新 jQuery 中的值？

Question

我试图阻止玩家再次添加新值，我只想更新数量..

HTML

<div class="playerTypeBlock" data-player-type-id="1" data-player-value="10.00">
    <div class="heading">Ninja</div>
    <div class="price"></div> <a class="addToTeam" href="#">Add player</a>

</div>
<hr>
<div class="playerTypeBlock" data-player-type-id="2" data-player-value="20.25">
    <div class="heading">Samurai</div>
    <div class="price">.25</div> <a class="addToTeam" href="#">Add player</a>

</div>
<hr>
<table class="teams" border="1">
    <thead>
        <tr>
            <th>Players</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody class="totalPlayers"></tbody>
</table>
<div class="total"> 
 <span>Total: $</span>
 <span class="amount" id="totalvalue">0.00</span>
</div>

我在附加 table 行时尝试使用 this，但没有得到想要的结果

JavaScript

var addToTeam = document.getElementsByClassName('addToTeam'),
    parentElement = document.getElementsByClassName('playerTypeBlock'),
    playerName = document.getElementsByClassName('heading'),
    totalVal = document.getElementById('totalvalue'),
    tableBody = document.querySelector('.totalPlayers');

var updatePlayers = function (evt) {

evt.preventDefault();

var amount = totalVal.innerHTML,
    productId = this.parentElement.getAttribute('data-player-type-id'),
    productPrice = this.parentElement.getAttribute('data-player-value'),
    playerName = this.parentNode.querySelector('.heading').innerHTML,
    updateTotal = parseFloat(amount) + parseFloat(productPrice);

var quantity = parseInt($(this).data('click'), 10) || 0;
quantity++;
$(this).data('click', quantity);


    totalVal.innerHTML = Math.round(updateTotal * 100) / 100;
    //adding the the table row here...
    $('table .totalPlayers').append('<tr><td>' + playerName + '</td><td>' + quantity + ' </td></tr>');

};

for (var i = 0; i < addToTeam.length; i++) {
    addToTeam[i].addEventListener('click', updatePlayers);
}

See Demo

Answer 1

这行有问题吗？

$('table .totalPlayers').append(
'<tr><td>' + playerName + '</td>' + 
'<td>' + quantity + ' </td></tr>');

您正在使用 append()，因此您将始终添加而不是替换。如果您可以为 class 或 id 添加一些独特的东西，那么您可以用这种方式替换它。即

 $('table .totalPlayers').append(
'<tr id="' + playerId + '">' + 
'<td>' + playerName + '</td>' + 
'<td class="quantity">' + quantity + ' </td></tr>');

然后更新

$('#' + playerId + ' .quantity').html(New value here);

Answer 2

检查 quantity 并追加新行，如果它是 1 否则修改数量单元格：

if (quantity > 1) {
    $('table .totalPlayers').find('#player-' + playerId + ' .quantity').text(quantity);
}
else {
    $('table .totalPlayers').append('<tr id="player-' + playerId + '"><td>' + playerName + '</td><td class="quantity">' + quantity + ' </td></tr>');
}

如何停止将值应用到仅更新 jQuery 中的值？

How to stop from appeding the the value to just updating the value in jQuery?

javascript

jquery

dom

演示：http://jsfiddle.net/zx65uv8a/12/