的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 { 
 
\t 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"> 
 
\t <p id="p1" class="odd">Lorem ipsum</p> 
 
\t <p id="p2" class="even">dolor sit amet</p> 
 
\t <p id="p3" class="odd">consectetur adipiscing</p> 
 
\t <p id="p4" class="even">sed do</p> 
 
\t <p id="p5" class="odd">eiusmod tempor</p> 
 
\t <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>

Answer 2

可以使用.filter()，:not()，:visible，:eq()，RegExp[135]，以检查是否从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>

Answer 3

使用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) { 
 
\t 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"> 
 
\t <p id="p1">Lorem ipsum</p> 
 
\t <p id="p2">dolor sit amet</p> 
 
\t <p id="p3">consectetur adipiscing</p> 
 
\t <p id="p4">sed do</p> 
 
\t <p id="p5">eiusmod tempor</p> 
 
\t <p id="p6">incididunt ut</p> 
 
</div> 
 
<button class="btnClick">Click</button>