第一次单击后，jQuery函数停止工作

Question

我正在尝试创建一个具有无限循环的轮播。

在我迈出第一步时，几乎可以肯定，这远非最佳方法。

无论如何，我认为代码应该是正确的。实际上，乍一看似乎还可以，但是在第一次单击后，该功能突然停止工作。

$(document).ready(function(){
  function moveToSelected(element) {
    var cards = $('#carousel > div');
    var clickIndex = cards.index(element);
    var mainIndex = cards.index($('.main'));
    
//     6 principal e o cara clica no next
    if (clickIndex == 0 && mainIndex == 5){
      cards.eq(4).removeClass().addClass('hidden');
      cards.eq(5).removeClass().addClass('previous');
      cards.eq(0).removeClass().addClass('main');
      cards.eq(1).removeClass().addClass('next');
//     1 principal e o cara clica no previous
    } else if (clickIndex == 5 && mainIndex == 0){
      cards.eq(1).removeClass().addClass('hidden');
      cards.eq(4).removeClass().addClass('previous');
      cards.eq(5).removeClass().addClass('main');
      cards.eq(0).removeClass().addClass('next');
//     6 principal e o cara clica previous
    } else if (clickIndex == 4 && mainIndex == 5){
      cards.eq(0).removeClass().addClass('hidden');
      cards.eq(3).removeClass().addClass('previous');
      cards.eq(4).removeClass().addClass('main');
      cards.eq(5).removeClass().addClass('next');
//     caso normal next     
    } else if (clickIndex > mainIndex){
      cards.eq(mainIndex-1).removeClass().addClass('hidden');
      cards.eq(mainIndex).removeClass().addClass('previous');
      cards.eq(clickIndex).removeClass().addClass('main');
      cards.eq(clickIndex + 1).removeClass().addClass('next');
//     caso normal previous
    } else if (clickIndex < mainIndex){
      cards.eq(mainIndex + 1).removeClass().addClass('hidden');
      cards.eq(clickIndex + 1).removeClass().addClass('previous');
      cards.eq(clickIndex).removeClass().addClass('main');
      cards.eq(mainIndex).removeClass().addClass('next');
    };
    
  };
  
  $('.previous').click(function() {
    moveToSelected($('.previous'));
  });

  $('.next').click(function() {
      moveToSelected($('.next'));
   });
});

                  
 

body, html {
  height: 100%;
  margin: 0;  
  padding: 0;
  width: 100%;
}

#carousel {
  background: red;
  height: 70vh;
  overflow: hidden;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 70vw;
}

#carousel > div {
  background: white;
  border-radius: 40px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  display: inline-block;
  height: 100%;
  font-family: Lato;
  left:50%;
  position: absolute;
  transition: all .7s;
  width: 50%;
}

#carousel > div h3 {
  text-align: center; 
}

.main{
  opacity:1;
  position: absolute;
  transform: translateX(-50%);
  z-index: 2;
}

.next, .previous{
  display: inline-block;
  opacity:.6;
  position: absolute;
  z-index: 1;
}

.next{
  transform: translateX(-20%) scale(.9);
}

.previous{
  transform: translateX(-80%) scale(.9);
  background-color: blue;
}

.hidden{
  opacity: 0;
  transform: translateX(-50%) scale(.9);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel">
  <div class="main">
    <h3>Módulo 1: Análise Financeira</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
  <div class="next">
    <h3>Módulo 2: Blablabla</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
  <div class="hidden">
    <h3>Módulo 3: Análise Financeira</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
  <div class="hidden">
    <h3>Módulo 4: Análise Financeira</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
  <div class="hidden">
    <h3>Módulo 5: Análise Financeira</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
  <div class="previous">
    <h3>6Módulo 6: Análise Financeira</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
</div>

有人可以帮助我吗？

Answer 1

简化代码，您应该使用事件委托解决此问题，这是documentation

$("body").on('click', '#div_id', function(e) {

});

事件委托使您可以将单个事件侦听器附加到父元素，该元素将为与选择器匹配的所有后代触发，无论这些后代现在存在还是将来添加。

您还可以使用 bootstrap 创建Carousel，它简化了前端开发，您不必担心jquery

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://www.portalveneza.com.br/wp-content/uploads/2019/07/image1.jpeg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://demo.yootheme.com/themes/joomla/2014/nite/cache/widgetkit/gallery/39/image2-dc3d866a26.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogs.gartner.com/john-wheeler/files/2016/05/cool.png" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 2

您的核心问题是您仅将事件监听器提供给两个初始的上一个/下一个项目，而不是全部。通过您已经在其他地方使用的代码（$('#carousel > div').click(handler)）可以轻松解决此问题：

$(document).ready(function(){
  function moveToSelected(element) {
    var cards = $('#carousel > div');
    var clickIndex = cards.index(element);
    var mainIndex = cards.index($('.main'));
    
//     6 principal e o cara clica no next
    if (clickIndex == 0 && mainIndex == 5){
      cards.eq(4).removeClass().addClass('hidden');
      cards.eq(5).removeClass().addClass('previous');
      cards.eq(0).removeClass().addClass('main');
      cards.eq(1).removeClass().addClass('next');
//     1 principal e o cara clica no previous
    } else if (clickIndex == 5 && mainIndex == 0){
      cards.eq(1).removeClass().addClass('hidden');
      cards.eq(4).removeClass().addClass('previous');
      cards.eq(5).removeClass().addClass('main');
      cards.eq(0).removeClass().addClass('next');
//     6 principal e o cara clica previous
    } else if (clickIndex == 4 && mainIndex == 5){
      cards.eq(0).removeClass().addClass('hidden');
      cards.eq(3).removeClass().addClass('previous');
      cards.eq(4).removeClass().addClass('main');
      cards.eq(5).removeClass().addClass('next');
//     caso normal next     
    } else if (clickIndex > mainIndex){
      cards.eq(mainIndex-1).removeClass().addClass('hidden');
      cards.eq(mainIndex).removeClass().addClass('previous');
      cards.eq(clickIndex).removeClass().addClass('main');
      cards.eq(clickIndex + 1).removeClass().addClass('next');
//     caso normal previous
    } else if (clickIndex < mainIndex){
      cards.eq(mainIndex + 1).removeClass().addClass('hidden');
      cards.eq(clickIndex + 1).removeClass().addClass('previous');
      cards.eq(clickIndex).removeClass().addClass('main');
      cards.eq(mainIndex).removeClass().addClass('next');
    };
    
  };
  $('#carousel > div').click(function() {
    if (this.classList.contains("previous") || this.classList.contains("next")) {
      moveToSelected(this);
    }
  });
});

body, html {
  height: 100%;
  margin: 0;  
  padding: 0;
  width: 100%;
}

#carousel {
  background: red;
  height: 70vh;
  overflow: hidden;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 70vw;
}

#carousel > div {
  background: white;
  border-radius: 40px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  display: inline-block;
  height: 100%;
  font-family: Lato;
  left:50%;
  position: absolute;
  transition: all .7s;
  width: 50%;
}

#carousel > div h3 {
  text-align: center; 
}

.main{
  opacity:1;
  position: absolute;
  transform: translateX(-50%);
  z-index: 2;
}

.next, .previous{
  display: inline-block;
  opacity:.6;
  position: absolute;
  z-index: 1;
}

.next{
  transform: translateX(-20%) scale(.9);
}

.previous{
  transform: translateX(-80%) scale(.9);
  background-color: blue;
}

.hidden{
  opacity: 0;
  transform: translateX(-50%) scale(.9);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel">
  <div class="main">
    <h3>Módulo 1: Análise Financeira</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
  <div class="next">
    <h3>Módulo 2: Blablabla</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
  <div class="hidden">
    <h3>Módulo 3: Análise Financeira</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
  <div class="hidden">
    <h3>Módulo 4: Análise Financeira</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
  <div class="hidden">
    <h3>Módulo 5: Análise Financeira</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
  <div class="previous">
    <h3>6Módulo 6: Análise Financeira</h3>
    <div class="detail">
      <ul>
        <li> 
          <i class="fa fa-angle-double-right"></i>
          Quais são os principais demonstrativos financeiros?
        </li>
      </ul>
    </div>
  </div>
</div>

卡片显示逻辑似乎有些时髦（或者我误解了该怎么做），请务必告诉您是否需要帮助，以及在这种情况下应该如何工作