javascript - 如何隐藏特定 slider 上的 NEXT 按钮

Question

我正在使用 Bootstrap 轮播，我想隐藏带有测验问题的特定 slider 上的下一步按钮。如果 HTML 测验的 JavaScript 验证通过，轮播将循环到下一个图像 slider ，并且 NEXT 按钮应该重新出现。我不擅长 JavaScript 和 angular。

这是我试图用来隐藏 slider 5 和 8 上的 NEXT 按钮的脚本。

<script type="text/javascript">


 $('.prev-slide').hide();

 $('#myCarousel').on('slid.bs.carousel', function (ev) {
 var carouselData = $(this).data('bs.carousel');
 var currentIndex = carouselData.getActiveIndex();

 if (currentIndex = 5 && 8) {
 $('.prev-slide').show();
 }
 else {
 $('.next-slide').hide();
 }

 })


</script>

这是我的轮播 html 的概述。

<div id = "myCarousel" class = "carousel slide" data-interval="false" >
  <!-- Carousel indicators -->
    <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active           </li>
     <li data-target = "#myCarousel" data-slide-to = "1"></li>
     <li data-target = "#myCarousel" data-slide-to = "2"></li>
       ...
     <li data-target = "#myCarousel" data-slide-to = "19"></li>
    <li data-target = "#myCarousel" data-slide-to = "20"></li>
 </ol>  

 <!-- Carousel items -->
 <div class = "carousel-inner">
  <div class = "item active">
     <img src = "includes/modules/sliders/Business_planning_for_success/Slide1.JPG" alt = "slide">
  </div>
  <div class = "item">
      <img src = "includes/modules/sliders/Business_planning_for_success/Slide2.JPG" alt = "slide">
  </div>
  ....
   <div class = "item">
       <img src =  "includes/modules/sliders/Business_planning_for_success/Slide21.JPG" alt =  "slide">
   </div>

</div>

   <!-- Controls buttons -->
   <div style = "text-align:center;">
     <input type = "button" class = "btn-sm prev-slide" onclick="slide()" value = "Previous Slide">
     <input type = "button" class = "btn-sm next-slide" onclick="slide()" value = "Next Slide">
   </div>

这是 slider 按钮的 JavaScript

function slide() {

// Cycles to the previous item
 $(".prev-slide").click(function() {
 $("#myCarousel").carousel('prev');
 });

// Cycles to the next item
 $(".next-slide").click(function() {
 $("#myCarousel").carousel('next');
});

};

请帮忙。

Answer 1

可以这样写:<input type = "button" id="prevBtn" class = "btn-sm prev-slide" onclick="slide()" style="display:none;" value = "Previous Slide">

在 js 中:if (currentIndex== 5 && currentIndex== 8) {document.getElementById("prevBtn").style.display="block"; }