仅匹配特定文本 - jQuery 字符串

Question

我正在使用下面的代码来更改按钮的类名。但是，我只想为一个带有文本"上传"的按钮执行此操作，而不是另一个显示"上传数据库"的按钮。

是否可以将其从"包含"更改为仅完全匹配？

<script>

$( ".sitebutton:contains('Upload')"   ).addClass('siteButton2').removeClass('sitebutton');

</script>

Answer 1

你不能用:contains做到这一点，因为这是一个"饥饿"的比赛。另一种方法是使用filter()，您可以在其中执行完全匹配：

$('.sitebutton').filter(function() {
return $(this).text().trim() == 'Upload';
}).toggleClass('siteButton2 sitebutton');

如果可能的话，更好的解决方案是在所需的button元素上放置一个id或class，然后通过它进行选择。

Answer 2

只需对元素使用 jQuery 过滤器：

$('.sidebutton')
.filter((i, e) => $(e).text() === 'Upload')
.addClass('sideButton2')
.removeClass('sideButton');

您可能需要修剪文本，因为可能会有一些额外的空格浮动。

Answer 3

您可以使用.filter()来检查元素的.textContent，:contains()内部使用.indexOf()检查文本是否包含在.textContent或.innerText中

$(".sitebutton").filter(function(i, el) {
return el.textContent === "Upload"
})
.removeClass('sitebutton')

Answer 4

我认为你通常会让自己更难，但你可以做这样的事情：

$(".sitebutton.Upload").not(".Database").addClass('siteButton2').removeClass('sitebutton');

Answer 5

只需为按钮输入一个特定的 id，然后调用所需的代码来更改类。
检查此 Plunker

这是代码
HTML：

<input type=button id="upload" value="Upload" class="sitebutton">
<input type=button id="uploaddb" value="Upload Database" class="sitebutton">

脚本

$('#upload').click(function() {
$('#upload').addClass('siteButton2').removeClass('sitebutton');
});