仅匹配特定文本 - 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');

如果可能，更好的解决方案是在所需的id元素上添加class或button并通过该选项进行选择。

Answer 2

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

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

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

Answer 3

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

$(".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');
 });