jQuery的：如何顯示在未來股利和隱藏本一個

我需要隱藏本股利和顯示下隱藏這裏是我的代碼jQuery的：如何顯示在未來股利和隱藏本一個

$(document).ready(function() { 
 
    $('#next').click(function() { 
 
    $(this).next().next().children("div").hide(); 
 
    $(this).next().next().children("div").show(); 
 
    }); 
 
});

#div2, 
 
#div3 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<button id="prev">Prev</button> 
 
<button id="next">Next</button> 
 
<hr /> 
 
<div id="main"> 
 
    <div id="div1">Div 1</div> 
 
    <div id="div2">Div 2</div> 
 
    <div id="div3">Div 3</div> 
 
</div>

DEMO

來源

2012-04-02 Muhammed

看this。處理開始/結束使用css類，保持js簡單。

來源

2012-04-02 15:03:58 jb10210

感謝朋友，它對我非常有用 – 2012-12-14 15:50:48

Divs是使用XSLT循環自動生成的，無法將第一個或最後一個添加爲類。對此有何幫助？ – Si8 2016-01-29 12:09:42

這樣的事情呢？

$(document).ready(function() { 

    var currentDiv = 0; 
    $('#next').click(function() { 
    $('#div' + (currentDiv + 1)).hide(); 
    currentDiv = (currentDiv + 1) % 3; 
    $('#div' + (currentDiv + 1)).show(); 
    }); 
});

來源

2012-04-02 14:50:29 sje397

將沒有全球越好，這也假定'＃DIV main'將永遠只能有3個孩子......我建議把'％3'動態 – 2012-04-02 15:00:14

@JohnnyCraig：是的，可以很容易地把'$ （'＃div1'）。parent（）。children（'div'）。length'在那裏，或者$（'＃div1'）。siblings（'div'）。length + 1' – sje397 2012-04-02 15:06:17

像這樣（下一個和以前處理）：

.item{ 
    display:none; 
} 


var activeItem = 0; 

function switchItem(isNext) { 

     if (isNext) { 
      activeItem++; 
     } else { 
      activeItem--; 
     } 

     activeItem = (activeItem == 3) ? 0 : activeItem; 
     activeItem = (activeItem == -1) ? 2 : activeItem; 

     showItem($("#main"), activeItem); 
    } 


    function showItem(selector, index) { 

     selector.find(".item").hide().eq(index).toggle(); 
    } 

<div id="main"> 
    <div id="div1" class="item">Div 1</div> 
    <div id="div2" class="item">Div 2</div> 
    <div id="div3" class="item">Div 3</div>  
</div>

來源

2012-04-02 14:53:02 FiveTools

你也可以使用' activeItem =（activeItem + 3）％3;'，只是爲了簡化一點點）;或者甚至'activeItem =（activeItem +（isNext？1：-1）+ 3）％3;' – sje397 2012-04-02 15:01:29

嘗試的東西有點不同

$(document).ready(function() { 

    $('#next').click(function() { 
      $eL=$('#main').children('div').filter(":visible"); 
      $('#main').children().hide(); 
      if($eL.next().length>0){ 
       $eL.next().show(); 
      }else{ 
       $('#main div')[0].show(); 
      } 

    }); 

    $('#prev').click(function() { 
      $eL=$('#main').children('div').filter(":visible"); 
      $('#main').children().hide(); 
      if($eL.previous().length>0){ 
       $eL.previous().show(); 
      }else{ 
       $('#main div')[$('#main div').length - 1].show(); 
      } 

    }); 

});

編輯：此函數假定孩子的div一個已經可見時頁面加載。

編輯：增加了對前一個按鈕

來源

2012-04-02 14:55:33

我有這樣的事情： https://jsfiddle.net/st8q8z5g/3/以前不工作，下一步工作除了，如何修改它，以便它循環通過，如果它是最後一個或第一個？ – Si8 2016-01-29 14:34:23

以下是代碼。

<ul class="grid"> 
    <li class="object"> 
    List Item 1<a class="show-next"> Show the next list item</a> 
    </li> 
     <li class="object"> 
    List Item 2 
    <a class="show-next">Show the next list item</a> 
    </li> 
     <li class="object"> 
    List Item 3 
    <a class="show-next">Show the next list item</a> 
    </li> 
</ul>

下面是您應該插入的腳本。

$('.grid .object').hide().filter(':lt(1)').show(); 
$('.show-next').click(function(){ 
    $eL = $('.grid .object').filter(":visible"); 
    // $(".grid").find(".object").hide().next().show(); 
    if($eL.next().length>0){ 
       $eL.next().show(); 
      }else{ 
       $('.grid .object')[0].show(); 
      } 
});

來源

2015-10-26 16:12:03 Suraj

這是小提琴 - [小提琴]（https://jsfiddle.net/2ocpjcxL/） – Suraj 2015-10-26 16:13:35

jQuery的：如何顯示在未來股利和隱藏本一個

回答

相關問題