Bootstrap 3：隐藏第一个和最后一个项目的轮播控件无效

Question

I did get the JS code from: 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>

The code is not hidding the respective controls.

There are no other carousels in the document.

By the way, what's the function of this piece of HTML?:

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

Answer 1

The id of the carousel div is "diapos". So this on the third line should be assigned to that, as 'left' and 'right' are its immediate children :

  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

Also, you probably forgot to close the 'diapos' div!