如何使用 jQuery 创建一个简单的客户推荐轮播

Question

我正在尝试学习如何使用 jQuery 创建一个非常简单的客户端推荐轮播。

这是我的客户推荐部分的样子：

这是我在这部分的 HTML 代码：

  <!-- TESTIMONIALS SECTION -->

  <div class="container">
    <div class="row">

      <div class="col-xs-12">
        <div class="indent-top">
          <h2 class="space-after">Отзывы<br> от наших клиентов</h2>
        </div>
      </div>

      <div class="col-xs-12 text-center">

        <div id="client-1" class="sss">
          <img class="testimonial-photo" src="assets/img/testimonials/clients/client-1.jpg">
          <h3 class="client-name">Евгений Карев</h3>
          <p class="client-description space-after">Генеральный директор,<br><strong>SIA INTERGAZ</strong></p>
          <div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-2 space-after">
            <p>“Сотрудничеством доволен, нареканий нет. Ни разу не нарушили сроков. Очень рад, что сами занимаются оформлением документов, так что мне не приходится в это лезть.”</p>
          </div>
        </div>

        <div id="client-2" class="hide">
          <img class="testimonial-photo" src="assets/img/testimonials/clients/client-2.jpg">
          <h3 class="client-name">Александр Карев</h3>
          <p class="client-description space-after">Директор по Маркетингу,<br><strong>SIA INTERGAZ</strong></p>
          <div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-2 space-after">
            <p>“Сотрудничеством доволен, нареканий нет. Ни разу не нарушили сроков. Очень рад, что сами занимаются оформлением документов, так что мне не приходится в это лезть.”</p>
          </div>
        </div>

        <div id="client-3" class="hide">
          <img class="testimonial-photo" src="assets/img/testimonials/clients/client-3.jpg">
          <h3 class="client-name">Иварс Викелис</h3>
          <p class="client-description space-after">Финансовый директор,<br><strong>SIA INTERGAZ</strong></p>
          <div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-2 space-after">
            <p>“Сотрудничеством доволен, нареканий нет. Ни разу не нарушили сроков. Очень рад, что сами занимаются оформлением документов, так что мне не приходится в это лезть.”</p>
          </div>
        </div>

        <div id="client-4" class="hide">
          <img class="testimonial-photo" src="assets/img/testimonials/clients/client-1.jpg">
          <h3 class="client-name">Сергей Кривошеев</h3>
          <p class="client-description space-after">Директор по ИТ,<br><strong>SIA INTERGAZ</strong></p>
          <div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-2 space-after">
            <p>“Сотрудничеством доволен, нареканий нет. Ни разу не нарушили сроков. Очень рад, что сами занимаются оформлением документов, так что мне не приходится в это лезть.”</p>
          </div>
        </div>

        <div class="col-xs-8 col-xs-offset-2 text-center indent-bottom">
         <ul>
           <li id="client-1-selector" class="client-selector active-client"></li>
           <li id="client-2-selector" class="client-selector"></li>
           <li id="client-3-selector" class="client-selector"></li>
           <li id="client-3-selector" class="client-selector"></li>
         </ul>
        </div>
      </div>

    </div>
  </div>

所以基本上我有四个不同的推荐，其中三个使用 Bootstrap .hide 类隐藏，第一个推荐是未隐藏的。在这些推荐信下方，我有四个客户端选择器（圆点），按下时应触发具有以下逻辑的脚本：

1. 按下 ".client-2"（推荐下方的圆点选择器）时，脚本应自动从 # 中删除 ".hide" 类client-2（第二个推荐），并给所有其他推荐一个 ".hide" 类以对用户隐藏它们。因此，据我了解，脚本应该检查某个推荐是否已经有一个“.hide”类，如果没有，则将该类添加到给定的推荐中。

这里要提到的一件事是，我在 JavaScript 和 jQuery 方面不是一个非常有经验的用户（目前还没有），但就我对这个脚本的了解而言：

$("body").on("click", "#client-2-selector", function(){
    $("#client-1").addClass('hide');
    $("#client-2").removeClass('hide');
    $("#client-1-selector").removeClass("active-client");
    $("#client-2-selector").addClass("active-client");
});

这个脚本有点工作：http://d.pr/i/1hXN（这是一个 .gif 文件，展示了它现在的工作方式）。

我知道应该有更好的方法来为所有四个客户推荐选择器实现相同的结果，因为如果我使用我的方法，我将需要添加许多相同的代码，这不是 DRY ......因此，如果有人可以帮助我完成这个脚本或给我一些关于如何改进它的建议，我将非常感激。

P.S 我知道有不同的插件可以达到预期的效果，例如：http://flickity.metafizzy.co/，但作为一个初学者我想练习我的技能，所以我决定自己做所有事情来更深入了解事物的实际运作方式。

非常感谢您。

Answer 1

试试这样的：

$("body").on("click", ".client-selector", function(){
    var index = $(this).index();
    $("[id^='client-']:not(.client-selector)").addClass('hide');
    $("#client-"+(index+1)).removeClass('hide');
    $(".client-selector").removeClass("active-client");
    $(this).addClass("active-client");
});

https://jsfiddle.net/nueL8utm/