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 类隐藏，第一个推荐被取消隐藏。在这些推荐下面，我有四个客户端选择器（圆点），按下它们时应触发具有以下逻辑的脚本：

当按下＆＃34; .client-2＆＃34; （推荐下方的圆点选择器）时，脚本应自动删除＆＃34; .hide＆＃34; < / strong>来自＃client-2 （第二次推荐）的课程，并向所有其他推荐书提供一个＆＃34; .hide＆＃34; 类，以隐藏它们用户。因此，据我所知，脚本应检查某个推荐书是否已经有一个＆＃34; .hide＆＃34; class，如果它不是将此类添加到给定的推荐。

这里要提到的一点是，我不是一个非常有经验的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文件，显示它现在如何工作）。

我知道应该有一个更好的方法来为所有四个客户端推荐选择器实现相同的结果，因为如果我将使用我的方法而不是我需要添加大量相同的代码，这不是干的...因此，如果有人能帮我解决这个问题或者给我一些关于如何改进它的建议，我将非常感激。

PS我知道有不同的插件可以达到预期的效果，例如：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/

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

1 个答案: