Question

我正在尝试从头开始构建自己的客户滑块，我对jQuery有非常基本的了解。

我想要完成的是以下内容：我想构建一个带有推荐的段落的滑块。我的控件将是“next”和“prev”，但我想动态地执行此操作。我不知道自从他们退出数据库以来我会有多少段落。所以它可能是1或10，这是我的问题。我设法在点击时显示（）并隐藏（）我的div，但就是这样。

这是我的基本代码：

的jQuery

$("#testimonials").ready(function(){

$("#1").show();
$("#2").hide();
$("#3").hide();

  $("#next").click(function(){
     $("#1").hide();
     $("#2").show();
                    });

  $("#prev").click(function(){
     $("#2").hide();
     $("#1").show();
                    });

});

HTML

<div id="testimonials">
   <div id="1" class="active-slide">
       <p>This is paragraph one</p>
   </div>
   <div id="2" class="inactive-slide">
       <p>This is paragraph two</p>
    </div>
    <div id="3" class="inactive-slide">
        <p>This is paragraph three</p>
     </div>
</div>

我愿意接受任何建议，或者如果有人知道一个很好的教程来阅读以实现这一目标。

如果我使用UL并尝试通过寻找孩子来“下一步”会更好吗？我此刻有点脑死亡，似乎无法弄清楚如何实现这个目标？

提前致谢

Answer 1

好吧首先让id成为数字是无效的HTML，但是对于现代浏览器，我认为这不是问题。其次，你不能硬编码这样的东西。这意味着你将不得不为每张幻灯片编写代码，这不仅仅是一个痛苦的屁股，但也看起来不太好。在这里，我举了一个简单的例子供你查看

DEMO

基本上你设置了next和prev函数作为一个系统，有一个变量包含正在查看的当前幻灯片和总幻灯片的nubmer你可以轻松计算哪个幻灯片是显示下一个或上一个。我希望这有帮助，不要害怕在评论中提出更多问题，我很乐意帮助你。祝你好运！

Answer 2

请将$('#testimonials').ready更改为$(#testimonials').load（如果您在加载div时尝试触发某项功能）。

Why it is better ?

Answer 3

试试这个......

不为每个div使用单独的ID

<强>的jQuery

   $(document).ready(function(){
       function showHide(opt) {
          var current = $(".active-slide");
          var gHelem  = (opt == "next") ? current.next(".testimonials_each") : current.prev(".testimonials_each");
          if(gHelem.length > 0) {
            gHelem.removeClass("inactive-slide").addClass("active-slide");
            current.removeClass("active-slide").addClass("inactive-slide");
          }
       }

      $("#next").click(function(){
          showHide("next");
      });

      $("#prev").click(function(){
         showHide("prev");
      });
   });

<强> CSS

.inactive-slide {
  display:none;
}

<强> HTML

<div id="testimonials">
   <div class="testimonials_each active-slide">
       <p>This is paragraph one</p>
   </div>
   <div class="testimonials_each inactive-slide">
       <p>This is paragraph two</p>
    </div>
   <div class="testimonials_each inactive-slide">
        <p>This is paragraph three</p>
   </div>
  <button id="prev">Previous</button>
  <button id="next">Next</button>
</div>

Live Demo

我的第一个jQuery滑块我需要一些建议

3 个答案: