如何在 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 () 

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