我有像这样的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>
我想只显示两个这样的段落
<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>
规则是“从'＃p1'开始，只有一个段落会在点击按钮上改变，从奇数到偶数，奇数类将改为另一个奇数类，甚至类将改为另一个偶数类”。
示例第一次更改将如下所示（第一次按下按钮）
<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>
示例第二次更改（第二次按钮点击）
<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>
下一步按钮点击将改变奇数，然后是偶数，奇数，偶数等等。 任何人请帮助我，我将非常感谢..
$(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>
答案 0 :(得分：4)
以下是一种方法：
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>
答案 1 :(得分：0)
您可以使用.filter()，:not()，:visible，:eq()，RegExp [135]来检查变量是否从{{1}增加是奇数或偶数;如果0在true .hide()元素p上调用.odd，.className :visible使用变量选择下一个.even元素，否则不要.hide() .even :visible元素，执行相同的操作
$(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>
答案 2 :(得分：0)
使用gt和lt会带来更易维护的代码（因为您可以轻松增加元素数量。
$(".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>