Question

我创建了一个函数，该函数可以在单击表格单元格后打印警报。警报包含一个计数器。我在表单元格innerHTML更改为某个值时计数增加的地方，而表单元格更改为另一个innerHTML值时计数减少的地方。但是，新的计数值似乎不会随着递增/递减而保存并再次重复相同的过程，即递增和递减新的计数器值。

有没有一种方法可以保存新的计数值，并在以后的钟点事件后更新警报

$(function() {
  $('td').click(function() {
    var x = $(this).html();
    var y = 1;
    if (x == "a") {
      y += 1;
      alert("New Value: " + y);
    } else if (x == "b") {
      y -= 1;
      alert("New Value: " + y);
    }
  })
})

  <html>
  <body>
  <table >
  <tr>
  <td  onclick="this.innerHTML ='a';">1</td>
  <td  onclick="this.innerHTML ='b';">2</td>
  <td  onclick="this.innerHTML ='a';">1</td>
  </tr>
   </table>

   </body>
  </html>

Answer 1

您必须将y声明为全局变量。我得到了您的代码，可用于以下代码段。

var y = 1; // Global

$(function() {
  $('td').click(function() {
    var x = $(this).html();
    if (x == "a") {
      y += 1;
      alert("New Value: " + y);
    } else if (x == "b") {
      y -= 1;
      alert("New Value: " + y);
    }
  })
})

.cell-button{
  width: 50px;
  height: 30px;
  margin: 5px;
  background-color: #ff000088;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<table>
	<tr>
		<td class="cell-button">a</td>
		<td class="cell-button">b</td>
	</tr>
</table>

Answer 2

使用以下代码，可以在单击按钮时更新计数器。您在代码中所做的就是每次单击按钮时，都通过执行var y = 1;重新定义y（我认为是您的计数器）。如果要保存，请删除该行。

var counter = 0;

$(".click").click(function() {
  counter++;
  console.log(counter);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click">Click</button>

注意：如果您希望此答案适用于您的代码，请使用更多的html代码更新您的帖子，并对此答案发表评论。

单击后更新警报和计数器

2 个答案: