比較文本和字串Jquery-有解無憂

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() 與字串進行比較的代碼：

我嘗試了很多東西，但沒有運氣，有什么幫助嗎？

我做錯了什么？以及如何解決它

uj5u.com熱心網友回復：

考慮以下示例，用于同一類的多個按鈕。

$(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-selector/

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/494176.html

標籤：jQuery 细绳特性比较

上一篇：如何在復雜的字串上添加空格？

下一篇：通過拆分向量創建矩陣