嘗試自動化jQuery click事件並顯示內容

Question

誰能告訴我是否可以自動化以下過程。 基本上，在下面的簡單代碼中，我正在使用jQuery click()事件。 因此，當用戶單擊文本時，請Click Me First Time! 新文本顯示在Click Me Second Time!下面Click Me Second Time! 。 當用戶Click Me Second Time! ，新文本顯示在Click Me Third Time!下方Click Me Third 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上調用的處理函數來實現這div.clickable （“ clickable”是為應包含在click流程中的元素提供的類）。

對過程的簡要說明，首先，我們將所有div都包裝在一個包裝div （例如，將其命名為'wrapper'），然后還將一個類用於所有應該參與（在下面的代碼段中為他們提供“ clickable”類），當單擊div.clickable時，我們將創建一個新的div元素，使其與其他div相同（在我的代碼段中為該類是“可點擊的”），那么我們將點擊事件偵聽器添加到新創建的div ，並將其添加到DOM ，最后，我們將從當前點擊的div刪除點擊事件偵聽器。

這是一個演示片段，以澄清所有所說的內容

 // 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

通過單擊按鈕來增加數字

看這里。 您需要創建一個計數器，然后增加它，然后可以在文本中附加帶有數字的html。