Search code examples
jquerystringpropertiescomparison

Compare text and string 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>

I'am trying to implement a code that compare a text() from class with a string:

I tried a lot of things, but without luck, any help?

What I am doing wrong? and how to fiz it

Solution

  • Consider the following example, for multiple buttons of the same class.

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

    Using .each() we can iterate each element. See More:

    You can also use a more direct Selector.

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

    See More: