javascript - Bootstrap 3 : Hidding carousel controls on first and last items not working

Question

我确实从以下位置获得了JS代码:netgloo

JS:

var checkitem = function() {
    var $this;
    $this = $("#");
    if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
      $this.children(".left").hide();
      $this.children(".right").show();
    } else if ($("#diapos .carousel-inner .item:last").hasClass("active")) {
      $this.children(".right").hide();
      $this.children(".left").show();
    } else {
      $this.children(".carousel-control").show();
    }
  };

  checkitem();

  $("#diapos").on("slid.bs.carousel", "", checkitem);

HTML:

  <div id="diapos" class="carousel paper2 slide" data-ride="carousel">
    <!-- diapos -->
    <div class="carousel-inner" role="listbox">
      <div class="overlay"></div>
      <div class="item active" id="first">
        <img src="img/01.jpg" alt="...">
      </div>
      <div class="item" id="second">
        <img src="img/02.jpg" alt="...">
      </div>
      <div class="item" id="last">
        <img src="img/03.jpg" alt="...">
       </div>
    </div>
</div>



    <a class="left carousel-control" href="#diapos" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
    <a class="right carousel-control" href="#diapos" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>

代码没有隐藏相应的控件。

文档中没有其他轮播。

顺便问一下，这段HTML的作用是什么？:

<div class="overlay"></div>

Answer 1

轮播 div 的 id 是“diapos”。所以第三行的 this 应该分配给 that，因为 'left' 和 'right' 是它的直接子元素:

  var checkitem = function() {
  var $this;
  $this = $("#diapos");  // this line needs to be changed
  if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
    $this.children(".left").hide();
     //continue as before from here

此外，您可能忘记关闭“diapos”div!