英文:
Add class to all buttons with certain text
问题
I;m trying to figure out how to add an class to all buttons with a certain text. I've got the below code working but it's only working for one button:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var isActive = document.querySelector('.btn-with-text');
if (isActive.innerText.trim() === 'MY Custom Text') {
document.querySelector('.btn-with-text').classList.add('btn-extra-class');
}
</script>
As far as my onderstanding I should use querySelectorAll and a forEach statement, but I cannot seem to get it work.
英文:
I;m trying to figure out how to add an class to all buttons with a certain text. I've got the below code working but it's only working for one button:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var isActive = document.querySelector('.btn-with-text');
if (isActive.innerText.trim() === 'MY Custom Text') {
document.querySelector('.btn-with-text').classList.add('btn-extra-class');
}
</script>
As far as my onderstanding I should use querySelectorAll and a forEach statement, but I cannot seem to get it work.
答案1
得分: 1
是的，您需要使用 querySelectorAll 并循环遍历数组中的所有元素。以下是如何实现的：
// 获取所有具有所需类的按钮
var buttonsWithMyText = document.querySelectorAll('.btn-with-text');
// 循环遍历所有按钮
buttonsWithMyText.forEach(button => {
// 检查按钮内的文本是否与您搜索的相符
if (button.innerText !== 'MY Custom Text') return;
// 添加您想要的附加类
button.classList.add('btn-extra-class');
});
<!-- 适用于任何类型的标签 -->
<a href="#" class="btn-with-text">MY Custom Text</a>
<a href="#" class="btn-with-text">OTHER Custom Text</a>
<a href="#" class="btn-with-text-different">MY Custom Text</a>
<br>
<button class="btn-with-text">MY Custom Text</button>
<button class="btn-with-text">OTHER Custom Text</button>
<button class="btn-with-text-different">MY Custom Text</button>
/* CSS 仅用于演示 - 不是必需的 */
a, button
{
display: block;
}
.btn-with-text,
.btn-with-text-different
{
color: white;
}
.btn-extra-class
{
color: red;
}
希望这有所帮助！
英文:
Yes, you need to use querySelectorAll and loop through all elements in the array. Here is how that could happen:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Get all buttons with the class you want
var buttonsWithMyText = document.querySelectorAll('.btn-with-text');
// Loop through all buttons
buttonsWithMyText.forEach(button => {
// Check if the text inside the button is what you search for
if (button.innerText !== 'MY Custom Text') return;
// Add the additional class you want
button.classList.add('btn-extra-class');
});
<!-- language: lang-html -->
<!-- Works with any kind of tag -->
<a href="#" class="btn-with-text">MY Custom Text</a>
<a href="#" class="btn-with-text">OTHER Custom Text</a>
<a href="#" class="btn-with-text-different">MY Custom Text</a>
<br>
<button class="btn-with-text">MY Custom Text</button>
<button class="btn-with-text">OTHER Custom Text</button>
<button class="btn-with-text-different">MY Custom Text</button>
<!-- language: lang-css -->
/* CSS is just to showcase - it is not needed */
a, button
{
display: block;
}
.btn-with-text,
.btn-with-text-different
{
color: white;
}
.btn-extra-class
{
color: red;
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论