Question

我有一个表，其中包含一些值，如果我想将所有这些值相加，则总和不得超过100。我想使sum = 100之后禁用单元格不可单击。更多，我希望点击次数最高为5。 https://codepen.io/anon/pen/gdRYMQ

<div class="container">
<table>

    <tbody>
        <tr>
            <td class="combat">10</td>
            <td class="combat">15</td>
            <td class="combat">30</td>

        </tr>
        <tr>
            <td class="combat">50</td>
            <td class="combat">20</td>
            <td class="combat">50</td>

        </tr>

    </tbody>
</table>

  <div class="sum">sum:</div>
</div>

Answer 1

这是一种方法。

let sum = 0;
let clicks = 0;
$sum = $(".sum");
$clicks = $("#clicks");

$(".combat").on("click", function(){
  if(clicks >= 5) return;
  clicks += 1;
  $clicks.text(`clicks:${clicks}`);
  const $this = $(this);
  const val = parseInt($this.text());
  
  if(sum + val <= 100){
    sum += val;
    $sum.text(`sum:${sum}`);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table>
   
    <tbody>
        <tr>
            <td class="combat">10</td>
            <td class="combat">15</td>
            <td class="combat">30</td>
            
        </tr>
        <tr>
            <td class="combat">50</td>
            <td class="combat">20</td>
            <td class="combat">50</td>
            
        </tr>
       
    </tbody>
</table>
  
  <div class="sum">sum:</div>
  <div id="clicks">clicks:0</div>
</div>

Answer 2

一个简单的练习来遍历单元格，获取它们的编号，将其添加并在总数超过100的情况下将一个类应用于该单元格。不完全确定您要单击的内容等-因为td通常不是单击的元素，因此我只是应用了一个类和样式来显示超出100个极限的单元格，在那里您可以根据需要进行操作。

请注意，您不需要jquery就能进行如此简单的过程-学习此类新的document.querySelector和document.querySelectorAll。

与评论中一样-请尝试显示您尝试过的工作代码。

var total = 0;
var cells = document.querySelectorAll('.combat');

cells.forEach(function(cell){
 var cellNum = parseInt(cell.innerText);
 total +=cellNum;
 if(total > 100) { cell.classList.add('over100')}
 })
 
 document.querySelector('.sum').innerHTML = 'sum: ' + total;

td.over100 { color: red}

<div class="container">
<table>

    <tbody>
        <tr>
            <td class="combat">10</td>
            <td class="combat">15</td>
            <td class="combat">30</td>

        </tr>
        <tr>
            <td class="combat">50</td>
            <td class="combat">20</td>
            <td class="combat">50</td>

        </tr>

    </tbody>
</table>

  <div class="sum">sum:</div>
</div>

5次点击后限制总和值

2 个答案: