Question

我是jQuery的新手，我正在练习下面的示例时从w3schools学习它，我不明白为什么该函数返回的次数和单击按钮一样多，并且我不知道该怎么做意味着如果我单击该按钮，则必须在dom中更改新文本/ HTML，但如果再次单击该按钮，则无需执行任何操作。我该怎么办？

<!DOCTYPE html>
<html>
<head>
<title>jQuery HTML</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("#test1").text(function(i, origText) {
                return "Old text : " + origText + "New text : Hello World (index: " + i + ")";
            });
        });
        $("#btn2").click(function(){
            $("#test2").html(function(i, origText) {
                return "Old HTML: " + origText + "New HTML : Hello World (index: " + i + ")";
            });
        });
    });
</script>
</head>
<body>
  <p id="test1">This is a <b>bold</b> paragraph.</p>
  <p id="test2">This is another <b>bold</b> paragraph.</p>
  <button id="btn1">show old/new text</button>
  <button id="btn2">show old/new html</button>
</body>
</html>

Answer 1

我再次点击按钮，然后就不执行任何操作

从字面上理解这一点（而不是将其另选为“给出相同值”的其他答案）

您可以使用.one，以便“点击”事件仅发生一次：

 $("#btn").one("click", function() {
     console.log("button clicked");
     $("#text").text("after");
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='text'>before</div>
<button type='button' id='btn'>click</button>

或者，您可以关闭click事件，其效果相同

$("#btn").click(function() {
     console.log("button clicked");
     $(this).off("click");
     $("#text").text("after");
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='text'>before</div>
<button type='button' id='btn'>click</button>

Answer 2

由于na参数保留当前值，因此将附加文本。这样，您将origText附加到每个事件已经存在的任何内容上。

要解决此问题，您不能使用该参数，而是将值设置为在每次事件触发时返回相同的字符串：

New text...

jQuery(function($) {
  $("#btn1").click(function() {
    $("#test1").text(function(i) {
      return 'New text : Hello World (index: ' + i + ')';
    });
  });
  
  $("#btn2").click(function() {
    $("#test2").html(function(i) {
      return 'New HTML : Hello World (index: ' + i + ')';
    });
  });
});

我还建议不要将W3Schools用于任何内容，因为它们的内容通常已经过时，有时甚至是完全错误的。

Answer 3

也许使用$("#btn1").one('click', function(){...可以解决您的问题

不想在jQuery中多次对按钮执行操作？

3 个答案: