CODEWITHSUNDEEP
javascript
Sungpah Lee
Sungpah Lee

Reputation: 1021

Element Show and Hide automatically with counter

I'm now trying to repeatedly display id1 and id2 elements ( hide, show ). If possible I also want to put fade-in/out methods.

Although I can see "counter" value by putting alert(); function. But id1,2 don't change themselves, and only id1 is stuck as a final display. I put the code of mine below.

<div class="row" id = 'wow1'> wowwow1 </div>
<div class="row" id = 'wow2' style="display:none;"> wowwow2 </div>

////

<script>
$(function() {

  var counter = 0;

  var timer = setInterval( showDiv, 2000);

  function showDiv() {
    if (counter ==0) { counter++; return; }

    $('#wow1','#wow2')
      .hide()
      .filter( function() { return this.id.match('wow' + counter); })   
      .show('fast');
    counter == 2? counter = 0 : counter++; 
    alert(wow);  

  }

});
</script>

I modified this code a bit from other stack overflow question for this application. How can I make this work? Please let me know!

Best

Upvotes: 0

Views: 70

Answers (1)

MDEV
MDEV

Reputation: 10838

Change $('#wow1','#wow2') to $('#wow1,#wow2')

As your current code is looking for #wow1 inside #wow2 whereas you actually want to select both elements.

http://api.jquery.com/jQuery/#jQuery-selector-context

Upvotes: 1

Related Questions