So blenden Sie die NEXT-Taste bei bestimmten Schiebereglern

Question

Ich benutze ein Bootstrap-Karussell und möchte die NEXT-Taste bei bestimmten Schiebereglern mit Quizfragen ausblenden. Wenn die JavaScript-Validierung für das HTML-Quiz bestanden wird, wechselt das Karussell zum nächsten Bildschieberegler und die NEXT-Schaltfläche sollte wieder angezeigt werden. Ich bin nicht gut mit JavaScript und eckig.

Dies ist das Skript, das ich die NEXT-Taste auf Schieber zu verbergen zu verwenden versucht, 5 und 8.

<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> 

Dies ist eine Übersicht über mein Karussell 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> 

Dies ist die JavaScript für den Gleitnippel

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'); 
}); 

}; 

Bitte helfen.

Answer 1

Sie können es wie folgt schreiben: <input type = "button" id="prevBtn" class = "btn-sm prev-slide" onclick="slide()" style="display:none;" value = "Previous Slide">

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