使用奇数偶数类的Javascript DOM操作

Question

I have HTML like this

<div class="oddeven">
    <p id="p1" class="odd">Lorem ipsum</p>
    <p id="p2" class="even">dolor sit amet</p>
    <p id="p3" class="odd">consectetur adipiscing</p>
    <p id="p4" class="even">sed do</p>
    <p id="p5" class="odd">eiusmod tempor</p>
    <p id="p6" class="even">incididunt ut</p>
</div>
<button class="btnClick">Click</button>

I want to show only two paragraph like this

<div class="oddeven">
    <p id="p1" class="odd active">Lorem ipsum</p> // every 'odd' class will show here
    <p id="p2" class="even active">dolor sit amet</p> // every 'even' class will show here
</div>
<button class="btnClick">Click</button>

The rule is "Starting from '#p1', only one paragraph will change on click button, from odd to even, Odd class will change to another odd class, and even class will change to another even class".

Example first change will look like this (first button click)

<div class="oddeven">
    <p id="p3" class="odd active">consectetur adipiscing</p> // #p1 change to #p3
    <p id="p2" class="even active">dolor sit amet</p>
</div>

Example second change (second button click)

<div class="oddeven">
    <p id="p3" class="odd active">consectetur adipiscing</p>
    <p id="p4" class="even active">sed do</p> // #p2 change to #p4
</div>

Next button click will change odd, then even, odd, even, and so on.. Anyone please help me, I would highly appreciate..

 $(document).ready(function(){ var first_odd = $('.oddeven').children('.odd')[0]; var first_even = $('.oddeven').children('.even')[0]; $(first_odd).addClass('active'); $(first_even).addClass('active'); var odd_sibs = $(first_odd).siblings('.odd'); var even_sibs = $(first_even).siblings('.even'); $('.btnClick').on('click', function(){ // I don't know what to do }) }) 

 .odd { color: red; } .even { color: blue; } .oddeven p { display: none; } .active { display: block!important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="oddeven"> <p id="p1" class="odd">Lorem ipsum</p> <p id="p2" class="even">dolor sit amet</p> <p id="p3" class="odd">consectetur adipiscing</p> <p id="p4" class="even">sed do</p> <p id="p5" class="odd">eiusmod tempor</p> <p id="p6" class="even">incididunt ut</p> </div> <button class="btnClick">Click</button> 

Answer 1

Here's one way to do it:

 var odd = $(".odd") // save a reference to the list of odd var even = $(".even") // and the list of even elements odd.eq(0).addClass("active") // display the first odd even.eq(0).addClass("active") // and first even odd.prependTo(".oddeven") // move the odd ones in front of the even // so that when visible they'll always be // before the even var current = 0 // index of item currently shown var next = odd // type to show next $("button.btnClick").on("click", function() { if (next === odd) // if next is odd current = (current + 1) % odd.length // go to next index next.filter(".active").removeClass("active") // deactivate previous one next.eq(current).addClass("active") // activate next next = next === odd ? even : odd // set which type to do next }) 

 .odd { color: red; } .even { color: blue; } .oddeven p { display: none; } .active { display: block!important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="oddeven"> <p id="p1" class="odd">p1 - Lorem ipsum</p> <p id="p2" class="even">p2 - dolor sit amet</p> <p id="p3" class="odd">p3 - consectetur adipiscing</p> <p id="p4" class="even">p4 - sed do</p> <p id="p5" class="odd">p5 - eiusmod tempor</p> <p id="p6" class="even">p6 - incididunt ut</p> </div> <button class="btnClick">Click</button> 

Answer 2

You can use .filter() , :not() , :visible , :eq() , RegExp [135] to check if a variable incremented from 0 is odd or even number; if true call .hide() on p elements having .odd .className which is :visible ; select next .even element using variable, else do not .hide() .even :visible element, perform same operation

 $(document).ready(function() { var i = 0; $(".btnClick").on("click", function oddEven() { if (i === 0) { $(".oddeven p") .filter(".even:eq(" + i + "), .odd:eq(" + i + ")") .show() .toggleClass("active") .filter(".odd").css("top", "60px") .addBack() .filter(".even").css("top", "100px") ++i; } else { if (/[135]/.test(i)) { $(".oddeven p:not(.odd:visible)").hide() .removeClass("active") .filter(".even:eq(" + i + ")") .css("top", "100px") .show() .addClass("active") } else { $(".oddeven p:not(.even:visible)").hide() .removeClass("active") .filter(".odd:eq(" + i + ")") .css("top", "60px") .show() .addClass("active") } ++i } if (i === $(".oddeven p").length -1) { i = 0; $(".oddeven p") .css("top", "0px") .hide() .removeClass("active"); oddEven() } }) }) 

 .odd { color: red; } .even { color: blue; } .oddeven p { display: none; position: absolute; top:0px; } .active { display: block!important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="oddeven"> <p id="p1" class="odd">Lorem ipsum</p> <p id="p2" class="even">dolor sit amet</p> <p id="p3" class="odd">consectetur adipiscing</p> <p id="p4" class="even">sed do</p> <p id="p5" class="odd">eiusmod tempor</p> <p id="p6" class="even">incididunt ut</p> </div> <button class="btnClick">Click</button> 

Answer 3

Using gt and lt will lead to more maintainable code (as you can easily increase the number of elements.

 $(".oddeven").data("location", 0); update(); function update() { loc = $(".oddeven").data("location") + 2; $(".oddeven").data("location", loc); $(".oddeven p").hide(); $(".oddeven p:lt(" + loc + "):gt(-3)").show(); } $('.btnClick').on('click', update); 

 .oddeven p:nth-child(odd) { color: red; } .oddeven p:nth-child(even) { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="oddeven"> <p id="p1">Lorem ipsum</p> <p id="p2">dolor sit amet</p> <p id="p3">consectetur adipiscing</p> <p id="p4">sed do</p> <p id="p5">eiusmod tempor</p> <p id="p6">incididunt ut</p> </div> <button class="btnClick">Click</button>