Question

我试图阻止播放器再次使用新值添加，而我想更新数量..

HTML

<div class="playerTypeBlock" data-player-type-id="1" data-player-value="10.00">
    <div class="heading">Ninja</div>
    <div class="price">$10</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">$20.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>

我在附加表格行时尝试使用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

检查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>');
}

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

Answer 2

这行问题？

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

您正在使用append()，因此您始终会添加而不是替换。如果你可以添加一个类或id唯一的东西，那么你可以这样替换它。即。

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

然后更新

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

如何停止将值附加到仅更新jQuery中的值？

2 个答案:

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