Question

.visible{display:block;}
.hidden{display:none;}

<div class="section-container">      
    <div id="sec_1" class="section visible">1</div> <!-- Should be visible always -->
    <div id="sec_2" class="section hidden">2</div>
    <div id="sec_3" class="section hidden">3</div>
    <div id="sec_4" class="section hidden">4</div>
    <div id="sec_5" class="section hidden">5</div>
</div>

<button type="button" id="show">Show<button>
<button type="button"  id="hide">Hide<button>

jQuery(document).ready(function (){
   jQuery('#hide').click(function(){
     //Code
   });
   jQuery('#show').click(function(){
     //Code 
   });
});

如何逐个显示.section div，即第二个.section在显示按钮点击时变为可见，依此类推，但点击隐藏按钮后，应隐藏最后一个可见的.section div 。但是永远不应该隐藏第一个.section div，它应该始终可见。

Answer 1

使用属性选择器[]获取ID Starts-With ^=的ID元素，并使用.slice(1)

忽略检索到的集合中的第一个元素

$("[id^='sec_']").slice(1)

使用:hidden方法与:visible和.filter()

组合使用.first()和.last()选择器

jQuery(function ($) { // DOM ready and $ alias secured

  var $sec = $("[id^='sec_']").slice(1); // Get all but first 

  $('#hide').click(function(){
    $sec.filter(":visible").last().addClass("hidden");
  });
   
  $('#show').click(function(){
    $sec.filter(":hidden").first().removeClass("hidden");
  });
   
});

/* why you want to use .visible? :) */
.hidden{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show">SHOW</button>
<button id="hide">HIDE</button>

<div class="section-container">      
    <div id="sec_1" class="section">1</div>
    <div id="sec_2" class="section hidden">2</div>
    <div id="sec_3" class="section hidden">3</div>
    <div id="sec_4" class="section hidden">4</div>
    <div id="sec_5" class="section hidden">5</div>
</div>

http://api.jquery.com/filter/
https://api.jquery.com/hidden-selector/
https://api.jquery.com/visible-selector/

Answer 2

这是一个可以帮助你的例子

https://jsfiddle.net/qss1z141/

df <- read.table(text="x   y   z   Date
x1  y1  z1  1
x2  y2  z2  2
x3  y3  z3  3", header=TRUE, stringsAsFactors=FALSE)

library(tidyverse)
df %>%
  dplyr::group_by(Date) %>%
  tidyr::gather(var, val, x:z) %>%
  dplyr::ungroup()

隐藏节目div一个接一个

2 个答案: