尝试自动化 jQuery 点击事件并显示内容

Question

谁能告诉我是否可以自动化以下过程。基本上，在我下面的简单代码中，我使用的是 jQuery click() 事件。因此，当用户单击文本Click Me First Time! 时，新文本会显示在Click Me Second Time! 下方。当用户单击Click Me Second Time! 时，Click Me Third Time! 下方会显示一个新文本。

只要用户继续点击屏幕上显示的最新文本，我就想继续这个过程。通过继续此过程，我的意思是，当用户单击最新文本时（此处为 Click Me Third Time!，我想在下面显示另一个文本，当用户再次单击该文本时，我想显示另一个新文本，依此类推)

有没有一种方法可以使这个过程自动化，而不是一次又一次地编写click() 事件，因为我不确定用户会继续点击最新文本多少次。请在下面找到我的代码：

$("#firstgrid").click(function() {
 //alert ("Text Clicked");
 
 $("<div />") 
              .append($("<div />", {
                  id: "secondgrid",
                 style: "margin:100px 10px 20px 100px "
              }))
               .appendTo(document.body);
              
              $("#secondgrid").text("Click Me Second Time!");
              
              
              $("#secondgrid").click(function() {
              
                  $("<div />") 
                  .append($("<div />", {
                      id: "thirdgrid",
                     style: "margin:100px 10px 20px 100px "
                  }))
                   .appendTo(document.body);
               
               
                   $("#thirdgrid").text("Click Me Third Time!");

                   });// End of onclick event
 
 							
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstgrid">Click Me First Time !</div>

Answer 1

您可以通过创建一个在每个div.clickable 上调用的处理函数来实现这一点（'clickable' 是一个为应该参与点击过程的元素提供的类）。

过程的简要说明，首先我们将所有divs 包装在一个包装器div 中（例如，我们将给它一个类名'wrapper'），我们还将给应该涉及的所有元素的类（我将在下面的 sn-p 中为它们提供“可点击”类），当单击 div.clickable 时，我们将创建一个新的 div 元素给它相同的类作为另一个divs（在我的sn-p中，该类是'clickable'），然后我们将一个click事件监听器添加到新创建的div，将它附加到DOM，最后我们'将从当前点击的div中移除点击事件监听器。

这是一个演示 sn-p 来阐明所有内容

// is used to count the 'divs'
var counter = 1;
// add click event listener to the div that's initially present in the page, Btw changing its class won't affect the script, but the newly created 'divs' should have the same class.
$('.clickable').on('click', handleClick);
// handler function to be called on each `div.clickable` click.
function handleClick(e) {
  var newEl = $("<div />", {
    class: "clickable",
    style: "margin:100px 10px 20px 100px ",
    text: 'click me for the ' + ++counter + ' time!'
  });
  // add click Event listener to the newly created div, the same function(here I name irt 'handleClick') is the handler.
  newEl.on('click', handleClick);
  $(this).parent().append(newEl);
  // remove click Event from the current clicked div.
  $(this).off('click');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="clickable">Click Me First Time !</div>
</div>

希望我把你推得更远。

Answer 2

Increment a number by clicking onto a button

看这里。您需要创建一个计数器，然后将其递增，然后您可以将文本附加到您的 html 中，其中包含一个数字。