Bootstrap 3：隱藏第一個和最后一個項目的輪播控件無效

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”。 因此，應該在第三行將其分配給它，因為“ 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！