Question

我是JavaScript / JQuery的新手。我正在尝试仅使用CSS和Jquery实现图像滑块。单击一个滑块的导航时，其他滑块的元素也会开始移动。如果我为每个滑块使用单独的Id，那么它工作正常，但我不想为每个滑块使用单独的Id。我将如何检测单击哪个滑块的导航并相应地移动元素。

提前致谢!!

这是Demo

<div class="container">
   <div class="row">
      <div class="col-sm-12">
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>1</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>2</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>3</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>4</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>5</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>6</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>A</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>B</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>C</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>D</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>E</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>F</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
      </div>
   </div>
</div>

CSS

.sr {
     position: absolute;
     clip: rect(1px 1px 1px 1px);
     clip: rect(1px, 1px, 1px, 1px);
     padding: 0;
     border: 0;
     height: 1px;
     width: 1px;
     overflow: hidden;
}
 .ul {
     overflow:hidden;
     height:100px;
}
 .li {
     display: inline-block;
     text-align:center;
     height:100px;
     background:#ccc;
}
 .js #live {
     display:none;
}

Jquery的

$(document).ready(function() {
  var slidestash;
  var lastindex = $(".live .ul .li").length - 1;
  var numstashed = 2;

  function setup() {
    $(".live")
      .attr('aria-label', "Rotating list of statistics")
      .attr('aria-live', 'polite')
      .attr('aria-relevant', 'additions')
      .attr('aria-atomic', 'false');
    slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
  }
  setup();

  $("html").removeClass("js");

  $(".prev").click(function() {

  $(".live .ul").prepend(slidestash);
    slidestash = $(".live .ul .li:nth-child(n+" + lastindex + ")").detach();
    if (!$(this).is(":focus")) $(this).focus(); //iOS hack
  });

  $(".next").click(function() {
    $(".live .ul").append(slidestash);
    slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
    if (!$(this).is(":focus")) $(this).focus(); //iOS hack
  })
});

Answer 1

您走在正确的轨道上，但您需要限制元素的上下文。例如，prev按钮应仅影响按钮所包含的滑块。

为此，您可以使用.container元素作为滑块的根，并搜索其中的元素。

例如：

$(".prev").click(function() {
    var container = $(this).parents(".outer_pro_layer").first();
    // or $(this).closest(".outer_pro_layer") or $(this).parent(".outer_pro_layer")
    container.find(".live .ul").prepend(slidestash);
    slidestash = container.find(".live .ul .li:nth-child(n+"+lastindex+")").detach();
    if (!$(this).is(":focus")) $(this).focus(); //iOS hack
});

Answer 2

你想要做的是

将用于运行滑块的所有代码放在单个函数中
在每个滑块实例上运行该功能
将一个实例的代码限制为仅在该元素内应用。

前两点很简单：

1

 function initSlider(e) {
   ..code here...
 }

2

 $('presentation').each(function(i,e) {
   initSlider(e);
 })

对于3，你需要将实例 - $(e) - 传递给函数中的所有jQuery选择器，作为第二个param（分隔符），告诉jQuery：＆＃34;只在这个元素中选择＆＃34 ;。
例如，$(".live")将成为$(".live", $(e))。

在这里工作：

＆＃13;

$(window).on('load', function() {
  $("html").removeClass("js");
  $('.presentation').each(function(i, e) {
    initSlider(e);
  });

  function initSlider(e) {
    var slidestash,
      lastindex = $(".live .ul .li", $(e)).length - 1,
      numstashed = 2;

    function setup() {
      $(".live", $(e))
        .attr('aria-label', "Rotating list of statistics")
        .attr('aria-live', 'polite')
        .attr('aria-relevant', 'additions')
        .attr('aria-atomic', 'false');
      slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")", $(e)).detach();
    }
    setup();



    $(".prev", $(e)).click(function() {
      $(".live .ul", $(e)).prepend(slidestash);
      slidestash = $(".live .ul .li:nth-child(n+" + lastindex + ")", $(e)).detach();
      if (!$(this).is(":focus")) $(this).focus(); //iOS hack
    });

    $(".next", $(e)).click(function() {
      $(".live .ul", $(e)).append(slidestash);
      slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")", $(e)).detach();
      if (!$(this).is(":focus")) $(this).focus(); //iOS hack
    })
  }
})

＆＃13;

.sr {
     position: absolute;
     clip: rect(1px 1px 1px 1px);
     clip: rect(1px, 1px, 1px, 1px);
     padding: 0;
     border: 0;
     height: 1px;
     width: 1px;
     overflow: hidden;
}
 .ul {
     overflow:hidden;
     height:100px;
}
 .li {
     display: inline-block;
     text-align:center;
     height:100px;
     background:#ccc;
}
 .js #live {
     display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="container">
   <div class="row">
      <div class="col-sm-12">
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>1</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>2</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>3</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>4</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>5</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>6</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>A</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>B</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>C</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>D</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>E</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>F</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
      </div>
   </div>
</div>

＆＃13;

如您所见，JavaScript现在可以正常运行。如果您需要更多帮助，请将您的代码转换为实时代码段，这样我就能看到自己在做什么，以及它应该如何看待。

使用css和javascript

2 个答案: