具有奇偶类的 Javascript DOM 操作

Question

我有这样的 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>

Answer 1

这是一种方法:

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>