如何在 Bootstrap 轮播的下一次/上一次单击时加载 JSP 页面

Question

早些时候我有滚动条，其中显示不同的图标。单击特定图标后，将显示 jsp 页面。但我需要用轮播替换它。

在下一个/上一个单击时，应调用以下函数：

 function testing(index) {

        var tableLength = tableAddArray.length;

        for (var i = 0; i < tableLength; i++) {  

            if (i == index) {

                selectedElement= tableAddArray[i].id;

            }

            console.log("selectedElement:: "+selectedElement);

        }

        createElement();

    }

function createElement() {

    var request ="/xyzz/abcdd?objectName="; 

    var attributesToSend = "&action=add" ; 

    attributesToSend += "&ref="+document.getElementsByName("ref")[0].value ; 

    document.getElementsByName("action")[0].value = "add"; 

    if (selectedElement != null) { request += selectedElement; 

    if (selectedElement == "1") {equest += "&condOp=5"; } 

    else if (selectedElement == "2") {request += "&dest=2";} 

    request += attributesToSend; location.href=request; 

    //from here other processing is done to get corresponding data from DB 

    } 

} 

然后在轮播中：

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false"> 

    <div class="carousel-inner"> 

    <div class="carousel-item"> 

    <c:choose> 

    <c:when test="${requestScope.objectName == '2'}"> 

    <jsp:include page="2nd_Slide.jsp"></jsp:include> </c:when>

     <c:when test="${requestScope.objectName == '3'}"> 

    <jsp:include page="3rd_slide.jsp"></jsp:include> </c:when> 

    </c:choose>

     </div> 

     <a class="carousel-control-prev" ..> 

    <a class="carousel-control-next" ..> 

    </div> 

因此我还需要在第 0 个索引处设置 objectname 。我不知道在轮播的第 0 张幻灯片显示之前如何调用 js。

Answer 1

您可能想在轮播的滑动操作上注册一个事件处理程序。像这样的东西$('#carousel_id').on('slide.bs.carousel', function ()&nbsp;&nbsp; //load jsp like before with click on icons)在需要触发jsp加载的元素上设置一些id注意：查看slid.bs.carousel以了解幻灯片后事件处理编辑：尝试：&nbsp; <div id="carouselExampleControls" class="carousel slide" data-&nbsp; &nbsp;ride="carousel">&nbsp; &nbsp; &nbsp;<div class="carousel-inner">&nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-item active">&nbsp; &nbsp; &nbsp; &nbsp; <p class="d-block w-100">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; Slide 1&nbsp; &nbsp; &nbsp; &nbsp; <div id="jspdiv1"></div>&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="carousel-item">&nbsp; &nbsp; &nbsp; <p class="d-block w-100">&nbsp; &nbsp; &nbsp; &nbsp; Slide 2&nbsp; &nbsp; &nbsp; &nbsp; <div id="jspdiv2"></div>&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">&nbsp; &nbsp; <span class="carousel-control-prev-icon" aria-hidden="true"></span>&nbsp; &nbsp; <span class="sr-only">Previous</span>&nbsp; </a>&nbsp; <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">&nbsp; &nbsp; <span class="carousel-control-next-icon" aria-hidden="true"></span>&nbsp; &nbsp; <span class="sr-only">Next</span>&nbsp; </a></div>&nbsp; <script>&nbsp; var ind = 0;&nbsp; $('#carouselExampleControls').bind('slid.bs.carousel', function (e) {&nbsp; &nbsp; if(e.direction =='right'){&nbsp; &nbsp; &nbsp;ind++;&nbsp; &nbsp; &nbsp;console.log("right "+ind);&nbsp; &nbsp; &nbsp;$("#jspdiv1").text("Slided right "+ind);&nbsp; &nbsp; }&nbsp; &nbsp; else if(e.direction == 'left'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ind--;&nbsp; &nbsp; &nbsp;console.log("left "+ind);&nbsp; &nbsp; &nbsp;$("#jspdiv2").text("Slided left "+ind);&nbsp; &nbsp; }&nbsp; &nbsp; console.log(e);&nbsp; &nbsp; });&nbsp; &nbsp; </script>