使用相同的 function 更改 onclick 事件的多個按鈕文本

Question

我有多個按鈕需要使用相同的 function 當有人點擊它時按鈕文本會改變。

我使用事件處理程序屬性與 JavaScript 代碼來實現效果。 但是，無論我單擊了哪個按鈕，始終只有第一個執行 function 的按鈕...

請運行下面的代碼片段然后你就會明白

 function myFunction() { document.querySelector(".demo span").innerHTML = "Copied"; setTimeout(function(){ document.querySelector(".demo span").innerHTML = "Find Out More"; }, 1000); }

 .Big { width: 257px; padding: 33px 0 30px 0; font-size: 21px; } button { font-family: 'Montserrat'; font-weight: 500; border-radius: 6px; margin-bottom: 3px; }.ButtonMain { background-color: #e6e6e6; position: relative; overflow: hidden; border: none; }.ButtonMain::before, .ButtonMain::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }.ButtonMain span { position: relative; color: #fff; }.ButtonMain:hover span { color: #000; transition: color 0.3s ease 0s; }.BlueRevealEffect::before { content: ''; background: #3a86ff; width: 120%; left: -10%; transform: skew(30deg); transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); }.BlueRevealEffect:hover::before { transform: translate3d(100%,0,0); }

 <button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction()"> <span>Find Out More</span> </button> <button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction()"> <span>Find Out More</span> </button> <button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction()"> <span>Find Out More</span> </button> <button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction()"> <span>Find Out More</span> </button>

Answer 1

使用this將元素作為參數傳遞給 function。

 function myFunction(element) { let span = element.querySelector("span"); span.innerHTML = "Copied"; setTimeout(function() { span.innerHTML = "Find Out More"; }, 1000); }

 .Big { width: 257px; padding: 33px 0 30px 0; font-size: 21px; } button { font-family: 'Montserrat'; font-weight: 500; border-radius: 6px; margin-bottom: 3px; }.ButtonMain { background-color: #e6e6e6; position: relative; overflow: hidden; border: none; }.ButtonMain::before, .ButtonMain::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }.ButtonMain span { position: relative; color: #fff; }.ButtonMain:hover span { color: #000; transition: color 0.3s ease 0s; }.BlueRevealEffect::before { content: ''; background: #3a86ff; width: 120%; left: -10%; transform: skew(30deg); transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); }.BlueRevealEffect:hover::before { transform: translate3d(100%, 0, 0); }

 <button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction(this)"> <span>Find Out More</span> </button> <button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction(this)"> <span>Find Out More</span> </button> <button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction(this)"> <span>Find Out More</span> </button> <button class="demo ButtonMain BlueRevealEffect Big" onclick="myFunction(this)"> <span>Find Out More</span> </button>

Answer 2

您可以通過使用事件委托技術（即，多個元素的 1 個事件偵聽器）和addEventListener function 輕松做到這一點。 這種方法允許您擺脫 HTML 中的內聯事件處理程序。 有關詳細信息，請參閱示例中的注釋：

 // Store a reference to the div.container const buttonContainerEl = document.querySelector('#container'); // Add 1 event listener for all 4 buttons buttonContainerEl.addEventListener('click', event => { if (event.target.tagName === 'BUTTON') { handleButtonClick(event); } else if (event.target.parentElement.tagName === 'BUTTON') { event.target.parentElement.click(); } }); function handleButtonClick(event) { // Store a reference to the clicked button span const spanEl = event.target.querySelector('span'); // Change the text and set the timeout to reset it spanEl.innerHTML = "Copied"; setTimeout(() => { spanEl.innerHTML = "Find Out More"; }, 1000); }

 .Big { width: 257px; padding: 33px 0 30px 0; font-size: 21px; } button { font-family: 'Montserrat'; font-weight: 500; border-radius: 6px; margin-bottom: 3px; }.ButtonMain { background-color: #e6e6e6; position: relative; overflow: hidden; border: none; }.ButtonMain::before, .ButtonMain::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }.ButtonMain span { position: relative; color: #fff; }.ButtonMain:hover span { color: #000; transition: color 0.3s ease 0s; }.BlueRevealEffect::before { content: ''; background: #3a86ff; width: 120%; left: -10%; transform: skew(30deg); transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); }.BlueRevealEffect:hover::before { transform: translate3d(100%, 0, 0); }

 <div id="container"> <button class="demo ButtonMain BlueRevealEffect Big"> <span>Find Out More</span> </button> <button class="demo ButtonMain BlueRevealEffect Big"> <span>Find Out More</span> </button> <button class="demo ButtonMain BlueRevealEffect Big"> <span>Find Out More</span> </button> <button class="demo ButtonMain BlueRevealEffect Big"> <span>Find Out More</span> </button> </div>