使用相同的 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>