我怎樣才能讓這個按鈕有兩個點擊事件？

Question

到目前為止，我的程序將在最里面的 div 中一遍又一遍地創建這些嵌套的 div。

我知道我可以在同一次點擊中發生多個事件，但在這種情況下，我需要它們一個接一個地發生。 所以 click#1 將導致嵌套 divs 和 image#1，但 click#2 將導致嵌套 divs 和 image#2。 click#3 將顯示 image#1 等等。 偶數點擊將顯示偶數圖像，奇數顯示奇數。 一世

dk 如果需要再次創建所有 div 或者只需要交換圖像。

如果有幫助（還沒有嘗試過，所以我還不想問）...最終我還需要創建一個文本框來跟蹤點擊次數並使用當前文本框值來更改圖像。

 var i = 0; function runTogether1() { addDiv(); addDiv2(); addDiv3(); addbutterfly(); } function addDiv() { var div1 = document.createElement('div'); div1.classList.add('div1'); document.body.appendChild(div1); } function addDiv2() { var div2 = document.createElement('div'); div2.classList.add('div2'); document.getElementsByClassName("div1")[i].appendChild(div2); } function addDiv3() { var div3 = document.createElement('div'); div3.classList.add('div3'); document.getElementsByClassName("div2")[i].appendChild(div3); } function addbutterfly() { var img = document.createElement('img'); img.src = "gorilla.bmp"; document.getElementsByClassName("div3")[i].appendChild(img); i++; }

 .div1 { background-color: red; margin: 1em; height: 250px; width: 250px; justify-content: center; align-items: center; } .div2 { background-color: yellow; height: 150px; width: 150px; } .div3 { background-color: limegreen; height: 75px; width: 75px; } div { display: flex; justify-content: center; align-items: center; position: relative; }

 <html> <head> <meta charset="utf-8"> <script src ="gorillajs.js" defer></script> </head> <body> <div class="button"> <button onclick = "runTogether1()"> click to get nested divs </button> </div> </body> </html>

Answer 1

創建一個全局布爾變量，每次運行runTogether().時都會切換該runTogether(). 當它為真時，運行您的“奇數”函數，然后將切換設置為假，否則，運行您的“偶數”函數並將您的切換設置為真。

Answer 2

如果我理解正確，您希望第一次單擊以創建 div 和圖像，並顯示特定圖像，然后單擊以保持與它們相同的 div，但只是交換圖像？

如果是這種情況，完成此操作的最簡單方法是保留對<img>標記的引用，或者添加諸如id類的屬性，以便您可以運行document.getElementById(...)來查找現有的<img>標記在您的點擊事件處理程序中...在您的簡化示例中，您也可以使用getElementsByTagName('img')[0] 。

要交換圖像內容，您只需更改img.src屬性。

您可以使用% （模）運算符來處理奇數/偶數確定，它基本上返回兩個數字的余數，因此1%2=1 、 2%2=0 、 3%2=1等。這意味着i%2對於偶數值總是返回0 ，對於奇數值總是返回1 。

function runTogether1() 
  {
    // Initial Call, create elements
    if (i === 0) {
      addDiv();
      addDiv2();
      addDiv3();
      addbutterfly();
    } else {
      var img = document.getElementByTagName('img')[0];
      if ((i % 2) === 0) {
        img.src = 'even-image-src.jpg';
      } else {
        img.src = 'odd-image-src.jpg';
      }
    }
  }

我怎樣才能讓這個按鈕有兩個點擊事件？

問題描述

2 個解決方案

解決方案1
1 2020-11-06 22:19:31

解決方案2
0 2020-11-06 22:25:07

我怎樣才能讓這個按鈕有兩個點擊事件？

問題描述

2 個解決方案

解決方案1 1 2020-11-06 22:19:31

解決方案2 0 2020-11-06 22:25:07

解決方案1
1 2020-11-06 22:19:31

解決方案2
0 2020-11-06 22:25:07