Javascript DOM manipulation with an odd even class
I have such HTML
<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 paragraphs 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> Rule: "Starting with" # p1 ", only one paragraph will change when the button is pressed, from odd to even, the Odd class will change to another odd class, and even the class will change to another even class."
Example: the first change will look like this (first click of a button)
<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 of the second change (pressing the second button)
<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> The next button will change odd, then even, odd, even, etc. Someone please help me, I would really appreciate it.
$(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> +5
3 answers
Here is one way to do this:
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> +4
You can use .filter() :not() .filter() :eq() , RegExp [135] to check if a variable increased from 0 an odd or even number; if true calls .hide() on p elements that have .odd .className , which is :visible ; select the next .even element using a variable, otherwise not .hide() .even :visible , do the 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> 0
Using gt and lt will increase the number of supported code (since 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> 0