CODEWITHSUNDEEP
jquery
Mr.Smithyyy
Mr.Smithyyy

Reputation: 1329

jQuery changing text of an element if another element has a certain class

I am trying to change the text value of an element if another element has a class but what I am currently doing is showing no results.

$(document).ready(function () {
    $('#number').text('00');

    setTimeout(function () {
        $('#test').removeClass('initial-number').addClass('change-number');
    }, 500);
});

$(document).change(function () {
    if ($('#test').hasClass('change-number') === true) {
        $('#number').text('10');
    };
});
#test {
  height: 2em;
  width: 2em;
}

.initial-number {
  background: blue;
}

.change-number {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="number"></span>
<div class="initial-number" id="test"></div>

Upvotes: 1

Views: 453

Answers (4)

Asim Shaikh
Asim Shaikh

Reputation: 169

Try this

   $(document).ready(function () {
$('#number').text('00');

setTimeout(function(){
  $('#test').removeClass('initial-number').addClass('change-number');
   $('#number').text('10');
  }, 500);
});


  
#test {
  height: 2em;
  width: 2em;
}

.initial-number {
  background: blue;
}

.change-number {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="number"></span>
<div class="initial-number" id="test"></div>

Upvotes: 3

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17114

Why not simply include it in the setTimeout function:

$(document).ready(function () {
    $('#number').text('00');

    setTimeout(function () {
        $('#test').removeClass('initial-number').addClass('change-number');
        if ($('#test').hasClass('change-number')) {
            $('#number').text('10');
        };
    }, 500);
});

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074148

document has no change event; that's only for form field elements.

You can use mutation observers for this, watching for changes to the attributes of the element in question. They're well-supported on modern browsers; on slightly less-modern browsers, you can find a polyfill using the old mutation events. On really older browsers, you'll have to poll.

Upvotes: 4

Gurgen Sargsyan
Gurgen Sargsyan

Reputation: 1087

try this

 $(document).bind('DOMSubtreeModified', function () {
       if ($('#test').hasClass('change-number') === true) {
        $('#number').text('10');
      };
    });

Change is only for input, textarea or select elements.

Upvotes: 0

Related Questions