html 奇数div,使用奇数偶数类的Javascript DOM操作

我有像这样的HTML

Lorem ipsum

dolor sit amet

consectetur adipiscing

sed do

eiusmod tempor

incididunt ut

Click

我想只显示这样的两个段落

Lorem ipsum

// every 'odd' class will show here

dolor sit amet

// every 'even' class will show here

Click

规则是“从’#p1’开始,只有一个段落会在点击按钮上改变,从奇数到偶数,奇数类将改为另一个奇数类,甚至类将改为另一个偶数类”.

示例第一次更改将如下所示(第一次单击按钮)

consectetur adipiscing

// #p1 change to #p3

dolor sit amet

示例第二次更改(第二次单击按钮)

consectetur adipiscing

sed do

// #p2 change to #p4

单击下一步按钮将改变奇数,然后是偶数,奇数,偶数等等.

有人请帮助我,我将非常感谢..

$(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;

}

Lorem ipsum

dolor sit amet

consectetur adipiscing

sed do

eiusmod tempor

incididunt ut

Click

解决方法:

这是一种方法：

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; }

p1 - Lorem ipsum

p2 - dolor sit amet

p3 - consectetur adipiscing

p4 - sed do

p5 - eiusmod tempor

p6 - incididunt ut

Click

标签：jquery,javascript,html

来源： https://codeday.me/bug/20190522/1154307.html