切换按钮内的文本
[英]Toggle text inside a button
问题描述
我希望文本在我将打开的联系人btn切换为“关闭联系人”时更改，当我点击它时，它会恢复为“打开的联系人”并继续这种方式。
我应该给它一个 id 然后使用箭头 function 并添加eventListener ，还是应该只使用普通onclick ？
const btn = document.getElementById("click_contact") const form = document.getElementById("message_form") btn.addEventListener('click', () => { form.classList.toggle('open') })
<div class="cta_btn_contact"> <button id="click_contact" class="btn3 cta-btn3">open contact</button> </div>
2 个解决方案
解决方案1
1 2022-07-31 13:27:19
您可以使用三元运算符根据其当前内容更改按钮的textContent 。
const btn = document.getElementById("click_contact") //const form = document.getElementById("message_form") const div = document.getElementById("testDiv") btn.addEventListener('click', () => { btn.textContent = btn.textContent === "open contact"? "close contact": "open contact"; div.classList.toggle('open') })
* { margin: 0; padding: 0; font-family: "poppins"; box-sizing: border-box; }.btn_sub { margin: 10px 35%; border-radius: 3px; }.btn3 { position: relative; background: transparent; border-top: 1px solid var(--maincolor); border-bottom: 1px solid var(--maincolor); border-left: none; border-right: none; padding: 6px 12px; text-transform: uppercase; font-size: 1rem; font-weight: 500; letter-spacing: 1px; color: black; overflow: hidden; transition: 0.5s ease all; cursor: pointer; z-index: 12; }.btn3:hover { color: var(--primarycolor); }.btn3::before { content: ''; transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%; width: 100%; cursor: pointer; height: 100%; background-color: var(--maincolor); transition: 0.5s ease all; }.cta-btn3 { color: black; }.cta-btn3::before { transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 0; z-index: -1; }.cta-btn3:hover::before { height: 500%; width: 100%; transition: 0.5s ease all; }.cta_btn_contact { width: 100%; display: flex; justify-content: center; align-items: center; } #testDiv{ width: 50px; height: 50px; background: yellow; } #testDiv.open { background: green; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <!-- CONTACT --> <div class="cta_btn_contact"> <button id="click_contact" class="btn3 cta-btn3">open contact</button> </div> <div id="testDiv"></div> </body> </html>
解决方案2
1 已采纳 2022-07-31 13:28:45
最简单的方法是添加一行在两个定义的文本之间切换带有textContent的文本，如下所示：
const btn = document.getElementById("click_contact") const form = document.getElementById("message_form") btn.addEventListener('click', () => { let text = btn.textContent; btn.textContent = text == 'OPEN CONTACT'? 'CLOSE CONTACT': 'OPEN CONTACT'; })
* { margin: 0; padding: 0; font-family: "poppins"; box-sizing: border-box; }.btn_sub { margin: 10px 35%; border-radius: 3px; }.btn3 { position: relative; background: transparent; border-top: 1px solid var(--maincolor); border-bottom: 1px solid var(--maincolor); border-left: none; border-right: none; padding: 6px 12px; text-transform: uppercase; font-size: 1rem; font-weight: 500; letter-spacing: 1px; color: black; overflow: hidden; transition: 0.5s ease all; cursor: pointer; z-index: 12; }.btn3:hover { color: var(--primarycolor); }.btn3::before { content: ''; transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%; width: 100%; cursor: pointer; height: 100%; background-color: var(--maincolor); transition: 0.5s ease all; }.cta-btn3 { color: black; }.cta-btn3::before { transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 0; z-index: -1; }.cta-btn3:hover::before { height: 500%; width: 100%; transition: 0.5s ease all; }.cta_btn_contact { width: 100%; display: flex; justify-content: center; align-items: center; }
<div class="cta_btn_contact"> <button id="click_contact" class="btn3 cta-btn3">open contact</button> </div>
jQuery切换带有内部引导图标的文本按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.