当滑块的幻灯片为 visible/hidden 时如何 show/hide div

Question

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

我有一个滑块，其幻灯片通过单击 prev/next 按钮可见和隐藏，并且滑块外有四个 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();
    }

我已经更改了您的代码

Answer 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();
    }
}

Answer 2

请检查一下。

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

Answer 3

我认为你最好在你的这会起作用

当滑块的幻灯片为 visible/hidden 时如何 show/hide div

How to show/hide divs when slider's slides are visible/hidden

javascript

jquery

slider

show-hide