比较文本和字符串jQuery

Question

let teste = $('.btn-timer').text().trim();

  condition = '15:00'

  //let result = teste.localeCompare(condition);
  //console.log(result);

  if (teste == condition) {
      $('.btn-timer').removeClass('btn-success');
      $('.btn-timer').addClass('btn-danger');
  }

  console.log(teste);
  console.log(condition);

 .btn-danger {
        color: #991C32 !important;
        background-color: #FFB2C0 !important;
        border-color: #C82442 !important;
    }

    .btn-success {
        color: #234D31 !important;
        background-color: #B2FFCD !important;
        border-color: #449560 !important;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-success shadow btn-timer td-content">
  <b>15:00</b>
</button>

我试图实现一个将类（）与字符串比较text（）的代码：

我尝试了很多事情，但是没有运气，有什么帮助吗？

我做错了什么？以及如何填充它

Answer 1

考虑以下示例，对于同一类的多个按钮。

$(function() {

  // Set Condition
  var condition = '15:00';

  $('.btn-timer').each(function(i, el) {
    // Test the element "el" Text against the Condition 
    if ($(el).text().trim() == condition) {
      // Remove class and add new class
      $(el).toggleClass('btn-success btn-danger');
    }
    console.log($(el).text().trim(), condition);
  });
});

.btn-danger {
  color: #991C32 !important;
  background-color: #FFB2C0 !important;
  border-color: #C82442 !important;
}

.btn-success {
  color: #234D31 !important;
  background-color: #B2FFCD !important;
  border-color: #449560 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-success shadow btn-timer td-content">
  <b>14:00</b>
</button>
<button class="btn btn-success shadow btn-timer td-content">
  <b>15:00</b>
</button>
<button class="btn btn-success shadow btn-timer td-content">
  <b>16:00</b>
</button>

使用.each（）我们可以迭代每个元素。请参阅更多：

• https://api.jquery.com/each/
• https://api.jquery.com/toggleclass/

您也可以使用更直接的选择器。

$(function() {
  $(".btn-timer:contains('15:00')").toggleClass("btn-success btn-danger");
});

.btn-danger {
  color: #991C32 !important;
  background-color: #FFB2C0 !important;
  border-color: #C82442 !important;
}

.btn-success {
  color: #234D31 !important;
  background-color: #B2FFCD !important;
  border-color: #449560 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-success shadow btn-timer td-content">
  <b>14:00</b>
</button>
<button class="btn btn-success shadow btn-timer td-content">
  <b>15:00</b>
</button>
<button class="btn btn-success shadow btn-timer td-content">
  <b>16:00</b>
</button>

请参阅更多：

• https://api.jquery.com/contains.com/contains-selector/