当滑块的幻灯片可见/隐藏时如何显示/隐藏 div答案

【问题标题】：How to show/hide divs when slider's slides are visible/hidden当滑块的幻灯片可见/隐藏时如何显示/隐藏 div
【发布时间】：2019-11-25 19:29:41
【问题描述】：

$(document).ready(function(){
      $(".cont_slider .slide").each(function(e) {
        if (e != 0)
            $(this).hide();
      });

      $("#arrow-next").click(function(){
        if ($(".cont_slider .slide:visible").next().length != 0)
            $(".cont_slider .slide:visible").next().show().prev().hide();
            else {
              $(".cont_slider .slide:visible").hide();
              $(".cont_slider .slide:first").show();
            }
            return false;
      });

      $("#arrow-back").click(function(){
        if ($(".cont_slider .slide:visible").prev().length != 0)
          $(".cont_slider .slide:visible").prev().show().next().hide();
          else {
            $(".cont_slider .slide:visible").hide();
            $(".cont_slider .slide:last").show();
          }
          return false;
      });
    });

    // show/hide squares
    if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }

#arrow-back, #arrow-next {
    background:black;
    height: 70px;
    width: 35px;
    top: 80px;
    z-index: 100000;
    font-size: 30px;
    text-align: center;
    color: white;
  }
  #arrow-back{
    position: absolute;
    float: left;
  }
  #arrow-next{
    position: absolute;
    margin-left: 100px;
    float: left;
  }
  .cont_slider{
    width: 400px;
    height: 70px;
    background: purple;
    color: white;
    position: absolute;
  }
  .slide{
    width: 100%;
    height: 70px;
  }
  #slide_1{
    background: red;
  }
  #slide_2{
    display: none;
    background: green;
  }
  #slide_3{
    display: none;
    background: orange;
  }
  #slide_4{
    display: none;
    background: blue;
  }
  .square_1{
    position: absolute;
    margin-top: 200px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background: yellow;
    float: left;
  }
  .square_2{
    position: absolute;
    margin-top: 200px;
    margin-left: 100px;
    width: 50px;
    height: 50px;
    background: #00FFFF;
    float: left;
    display: none;
  }
  .square_3{
    position: absolute;`
    margin-top: 200px;
    margin-left: 150px;
    width: 50px;
    height: 50px;
    background: #008080;
    float: left;
    display: none;
  }
  .square_4{
    position: absolute;
    margin-top: 200px;
    margin-left: 200px;
    width: 50px;
    height: 50px;
    background: #900C3F;
    float: left;
    display: none;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="arrow-back">&#8249;</div>
<div id="arrow-next">&#8250;</div>
<div class="cont_slider">
  <div id="slide_1" class="slide">slide 1</div>
  <div id="slide_2" class="slide">slide 2</div>
  <div id="slide_3" class="slide">slide 3</div>
  <div id="slide_4" class="slide">slide 4</div>
</div>
<div class="square_1">

</div>
<div class="square_2">

</div>
<div class="square_3">

</div>
<div class="square_4">

</div>

我有一个滑块，通过单击上一个/下一个按钮可以看到和隐藏其幻灯片，并且滑块中有四个 div 正方形。例如，当幻灯片 3 可见时，我希望正方形 3 可见。

我试过这个脚本，但它不起作用

if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }

CSS

  #arrow-back, #arrow-next {
    background:black;
    height: 70px;
    width: 35px;
    top: 80px;
    z-index: 100000;
    font-size: 30px;
    text-align: center;
    color: white;
  }
  #arrow-back{
    position: absolute;
    float: left;
  }
  #arrow-next{
    position: absolute;
    margin-left: 100px;
    float: left;
  }
  .cont_slider{
    width: 400px;
    height: 70px;
    background: purple;
    color: white;
    position: absolute;
  }
  .slide{
    width: 100%;
    height: 70px;
  }
  #slide_1{
    background: red;
  }
  #slide_2{
    display: none;
    background: green;
  }
  #slide_3{
    display: none;
    background: orange;
  }
  #slide_4{
    display: none;
    background: blue;
  }
  .square_1{
    position: absolute;
    margin-top: 200px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background: yellow;
    float: left;
  }
  .square_2{
    position: absolute;
    margin-top: 200px;
    margin-left: 100px;
    width: 50px;
    height: 50px;
    background: #00FFFF;
    float: left;
    display: none;
  }
  .square_3{
    position: absolute;`
    margin-top: 200px;
    margin-left: 150px;
    width: 50px;
    height: 50px;
    background: #008080;
    float: left;
    display: none;
  }
  .square_4{
    position: absolute;
    margin-top: 200px;
    margin-left: 200px;
    width: 50px;
    height: 50px;
    background: #900C3F;
    float: left;
    display: none;
  }

HTML

<div id="arrow-back">&#8249;</div>
<div id="arrow-next">&#8250;</div>
<div class="cont_slider">
  <div id="slide_1" class="slide">slide 1</div>
  <div id="slide_2" class="slide">slide 2</div>
  <div id="slide_3" class="slide">slide 3</div>
  <div id="slide_4" class="slide">slide 4</div>
</div>
<div class="square_1">

</div>
<div class="square_2">

</div>
<div class="square_3">

</div>
<div class="square_4">

</div>

jQuery

    $(document).ready(function(){
      $(".cont_slider .slide").each(function(e) {
        if (e != 0)
            $(this).hide();
      });

      $("#arrow-next").click(function(){
        if ($(".cont_slider .slide:visible").next().length != 0)
            $(".cont_slider .slide:visible").next().show().prev().hide();
            else {
              $(".cont_slider .slide:visible").hide();
              $(".cont_slider .slide:first").show();
            }
            return false;
      });

      $("#arrow-back").click(function(){
        if ($(".cont_slider .slide:visible").prev().length != 0)
          $(".cont_slider .slide:visible").prev().show().next().hide();
          else {
            $(".cont_slider .slide:visible").hide();
            $(".cont_slider .slide:last").show();
          }
          return false;
      });
    });

    // show/hide squares
    if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }

我修改了你的代码

【问题讨论】：

这是工作人员。有什么问题？
问题是，例如，如果我单击下一个按钮并且滑块从幻灯片 1 更改为幻灯片 2，当幻灯片 2 可见时，方块 2 保持隐藏状态，方块 1 保持可见（它应该是像幻灯片 1) 一样隐藏。
有效吗？
@Guglielmo Albesano 幻灯片 1-> 幻灯片 2 没有导致方格 2 保持隐藏的原因是没有进行方格 2 的识别。将方块 2 和其他方块检查的代码放在一个函数中，并在 load 和 click 事件处理程序中调用它

标签： javascript jquery slider show-hide

【解决方案1】：

如果任务是重复检查可见性并随后根据上述检查做出决定以显示或隐藏框，则尝试在每个事件处理程序中输出代码。

$("#arrow-back").click(function(){
     .
     .
     . Perform the task meant for click
     // show/hide squares
    showHideFunction();
});
function showHideFunction(){
if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }
}

【讨论】：

【解决方案2】：

我认为你最好在你的这会工作

【讨论】：

我认为您最好将 'id' 添加到您的 div 中，这样会起作用

【解决方案3】：

请检查一下。

$(document).ready(function(){
      $(".cont_slider .slide").each(function(e) {
        if (e != 0)
            $(this).hide();
      });

      $("#arrow-next").click(function(){
        if ($(".cont_slider .slide:visible").next().length != 0)
            $(".cont_slider .slide:visible").next().show().prev().hide();
            else {
              $(".cont_slider .slide:visible").hide();
              $(".cont_slider .slide:first").show();
            }
            return false;
      });

      $("#arrow-back").click(function(){
        if ($(".cont_slider .slide:visible").prev().length != 0)
          $(".cont_slider .slide:visible").prev().show().next().hide();
          else {
            $(".cont_slider .slide:visible").hide();
            $(".cont_slider .slide:last").show();
          }
          return false;
      });
    });

    // show/hide squares
    if($('#slide_1').is(':visible')) {
      $('.square_1').show();
    }
    if($('#slide_2').is(':visible')) {
      $('.square_2').show();
    }
    if($('#slide_3').is(':visible')) {
      $('.square_3').show();
    }
    if($('#slide_4').is(':visible')) {
      $('.square_4').show();
    }

#arrow-back, #arrow-next {
    background:black;
    height: 40px;
    width: 35px;
    top: 80px;
    z-index: 100000;
    font-size: 30px;
    text-align: center;
    color: white;
    cursor: pointer;
  }
  #arrow-back{
    position: absolute;
    float: left;
  }
  #arrow-next{
    position: absolute;
    margin-left: 100px;
    float: left;
  }
  .cont_slider{
    width: 400px;
    height: 70px;
    background: purple;
    color: white;
    position: absolute;
  }
  .slide{
    width: 100%;
    height: 70px;
  }
  #slide_1{
    background: red;
  }
  #slide_2{
    display: none;
    background: green;
  }
  #slide_3{
    display: none;
    background: orange;
  }
  #slide_4{
    display: none;
    background: blue;
  }
  .square_1{
    position: absolute;
    margin-top: 200px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    //background: yellow;
    float: left;
  }
  .square_2{
    position: absolute;
    margin-top: 200px;
    margin-left: 100px;
    width: 50px;
    height: 50px;
    background: #00FFFF;
    float: left;
    display: none;
  }
  .square_3{
    position: absolute;`
    margin-top: 200px;
    margin-left: 150px;
    width: 50px;
    height: 50px;
    background: #008080;
    float: left;
    display: none;
  }
  .square_4{
    position: absolute;
    margin-top: 200px;
    margin-left: 200px;
    width: 50px;
    height: 50px;
    background: #900C3F;
    float: left;
    display: none;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="arrow-back">&#8249;</div>
<div id="arrow-next">&#8250;</div>
<div class="cont_slider">
  <div id="slide_1" class="slide">slide 1</div>
  <div id="slide_2" class="slide">slide 2</div>
  <div id="slide_3" class="slide">slide 3</div>
  <div id="slide_4" class="slide">slide 4</div>
</div>
<div class="square_1">

</div>
<div class="square_2">

</div>
<div class="square_3">

</div>
<div class="square_4">

</div>

【讨论】：