CODEWITHSUNDEEP
javascriptjqueryhtmlif-statement
skdfsfwse
skdfsfwse

Reputation: 19

If Div Contains EXACT text, add class

Okay, So I am looking to make a script where if this code contains the exact word "is123" the class "a" will be added to div id "#1" the problem is, ":contains" will work without EXACTLY containing the entire string. I did research and find answers, but none that I was able to understand and apply to my situation! Thanks!

div id 1 is a count down which is changed every second.

<div id="1">1:05</div>
<div class="2 hidden">ayyy</div>
<script>
if ($("#1").text().trim() === "1:05") {
$(".2").removeClass('hidden');
}
</script>

Upvotes: 1

Views: 1587

Answers (4)

Eaten by a Grue
Eaten by a Grue

Reputation: 22931

If you want to trigger an event when the timer reaches a certain point you can do it a couple of ways.

EXAMPLE 1

Preferably hook into the timer function itself if you have access to that code. This is probably the most efficient method:

// This runs immediately when timer is updated

function checkTime(timerValue) {
  if (timerValue == '01:05') {
    $('.alert').show();
  }
}

// SIMULATE YOUR TIMER - Courtesy of http://stackoverflow.com/a/20618517/1767412

function startTimer(duration, display) {
  var start = Date.now(),
    diff,
    minutes,
    seconds;

  function timer() {
    diff = duration - (((Date.now() - start) / 1000) | 0);
    minutes = (diff / 60) | 0;
    seconds = (diff % 60) | 0;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (diff <= 0) {
      start = Date.now() + 1000;
    }

    // Call your function to check the time
    checkTime(display.textContent);
  };
  timer();
  setInterval(timer, 1000);
}

window.onload = function() {
  var display = document.querySelector('#timer');
  startTimer(70, display);
};
.alert {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="timer"></div>
<div class="alert">Time to show this div!</div>
<div class="console"></div>

EXAMPLE 2

Or you can do something like below which is to poll the <div> contents at intervals and trigger the event when it matches your criteria. I don't like this as much because you've got an extra process running at a high frequency - but there are many cases where this might be the only option:

/*
This runs once every 0.1 seconds so it will trigger
almost immediately after the timer reaches 01:05
*/

var t = setInterval(function() {
  var timerValue = $("#timer").text().trim();
  if (timerValue == '01:05') {

    // Stop watching the timer once it matches
    clearInterval(t);

    // Show the div
    $(".alert").show();
  }
}, 100);


/*
SIMULATE YOUR TIMER
Courtesy of http://stackoverflow.com/a/20618517/1767412
*/

function startTimer(duration, display) {
  var start = Date.now(),
    diff,
    minutes,
    seconds;

  function timer() {
    diff = duration - (((Date.now() - start) / 1000) | 0);
    minutes = (diff / 60) | 0;
    seconds = (diff % 60) | 0;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = minutes + ":" + seconds;
    if (diff <= 0) {
      start = Date.now() + 1000;
    }
  };
  timer();
  setInterval(timer, 1000);
}

window.onload = function() {
  var display = document.querySelector('#timer');
  startTimer(70, display);
};
.alert {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="timer"></div>
<div class="alert">Time to show this div!</div>

Upvotes: 0

Mark Eriksson
Mark Eriksson

Reputation: 1475

<div id="1">is123</div>
<script>
if ($("#1").text().trim() === "is123") {
    $("#1").addClass('a');
}
</script>

You need to put your script after the element, if it's before the element, it can't find the element because the DOM hasn't rendered it yet. Unless you wrap it in the 'jQuery document ready' function.

EDITED TO REFLECT CHANGES TO OP

<div id="1">is123</div>
<script>
if ($("#1").text().trim() === "is123") {
    $(".2").removeClass('hidden');
}
</script>

Upvotes: 3

tagh
tagh

Reputation: 1037

Use this:

$("#1").text()==="is123"

=== means exact match

code:

<div id="1">is123</div>
<script>
if ($("#1").text()==="is123"){
    $("#1").addClass('a');
}
</script>

Upvotes: 1

Bhugy
Bhugy

Reputation: 711

Try this

<script>
if ($(#1).text() === "is123";).addClass('a'))
</script>

<div id="1">is123</div>

Upvotes: -1

Related Questions