Question

我有五个班级，女巫默认为display: none;风格

被禁用

我也有具有此类的div盒

<style>.box-1, .box-2, .box-3, .box-4, .box-5 { display: none;}</style>

<div class="box-1">Name1</div><div class="box-1">Age1</div>
<div class="box-2">Name2</div><div class="box-2">Age2</div>
<div class="box-3">Name3</div><div class="box-3">Age3</div>
<div class="box-4">Name4</div><div class="box-4">Age4</div>
<div class="box-5">Name5</div><div class="box-5">Age5</div>

<div class="button-show">show</div> <div class="button-hide">hide</div>

底部我有显示和隐藏按钮。

我想先点击SHOW，然后再点击box-1，再点击box-2 box-3 {{ 1}}，然后从最后点击box-4禁用框。

示例1：

如果我看到box-5，它将在单击HIDE时隐藏

示例2：

如果我看到1 2 3 4 5，它将在单击5 4 3 2 1时隐藏。

P.S。我想用1 2

Answer 1

您需要jquery click事件和一个记住当前数字的计数器。

方法如下：

$(document).ready(function(){
  let counter = 0;
  $(".button-show").on("click", function(){
    counter++;
    if(counter > $('[class*=box]').length/2){
      counter = $('[class*=box]').length/2;
    }
    $(".box-"+counter).show();
  });
  
  
  $(".button-hide").on("click", function(){
    $(".box-"+counter).hide();
    counter--;
  });
});

.box-1, .box-2, .box-3, .box-4, .box-5 { display: none;}

.button-show, .button-hide{
  width:100px;
  height:30px;
  background-color:blue;
  color:white;
  text-align:center;
  line-height:30px;
  border-radius: 5px;
  display:inline-block;
  margin:10px;
  cursor:pointer;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="button-show">show</div> <div class="button-hide">hide</div>
<div class="box-1">Name1</div><div class="box-1">Age1</div>
<div class="box-2">Name2</div><div class="box-2">Age2</div>
<div class="box-3">Name3</div><div class="box-3">Age3</div>
<div class="box-4">Name4</div><div class="box-4">Age4</div>
<div class="box-5">Name5</div><div class="box-5">Age5</div>

Answer 2

我想您可以执行以下操作：

var count = 1;

function show() {
    $(".box-"+count).show();
    count++;    
}

function hide() {
    for(val = 4; val == 0; val--){
        $(".box-"+val).hide();
    }   
}

HTML

<style>.box-1, .box-2, .box-3, .box-4, .box-5 { display: none;}</style>

<div class="box-1">Name1</div><div class="box-1">Age1</div>
<div class="box-2">Name2</div><div class="box-2">Age2</div>
<div class="box-3">Name3</div><div class="box-3">Age3</div>
<div class="box-4">Name4</div><div class="box-4">Age4</div>
<div class="box-5">Name5</div><div class="box-5">Age5</div>

<div class="button-show" onclick="show()">show</div> <div class="button-hide" onclick="hide()">hide</div>

如何通过jQuery使显示/隐藏Div框？

2 个答案: