如何在 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 个索引处设置对象名。在第 0 张轮播幻灯片显示之前，我不知道如何调用 js。

Answer 1

您可能想在轮播的滑动动作上注册一个事件处理程序。像这样的

$('#carousel_id').on('slide.bs.carousel', function () 
  //load jsp like before with click on icons
)

在需要触发jsp加载的元素上设置一些id

注意：请查看 slid.bs.carousel 以了解幻灯片后事件处理

编辑：

试试：

  <div id="carouselExampleControls" class="carousel slide" data-   ride="carousel">
     <div class="carousel-inner">
        <div class="carousel-item active">
        <p class="d-block w-100"> 
        Slide 1
        <div id="jspdiv1"></div>
      </p>
    </div>
    <div class="carousel-item">
      <p class="d-block w-100">
        Slide 2
        <div id="jspdiv2"></div>
      </p>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

  <script>
  var ind = 0;
  $('#carouselExampleControls').bind('slid.bs.carousel', function (e) {
    if(e.direction =='right'){
     ind++;
     console.log("right "+ind);
     $("#jspdiv1").text("Slided right "+ind);
    }
    else if(e.direction == 'left'){
         ind--;
     console.log("left "+ind);
     $("#jspdiv2").text("Slided left "+ind);
    }
    console.log(e);
    });
    </script>