अजीब भी वर्ग

Question

साथ जावास्क्रिप्ट डोम हेरफेर मैं केवल इस

<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' से शुरू किया गया है दिखाना चाहते हैं की तरह HTML है, एक पैराग्राफ क्लिक बटन पर बदल जाएगा, अजीब से भी, विषम वर्ग एक और विषम वर्ग में बदल जाएगा, और यहां तक ​​कि कक्षा भी किसी अन्य वर्ग में बदल जाएगी "।

उदाहरण पहला परिवर्तन इस (पहला बटन क्लिक करें) की तरह दिखाई देगा

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