早些時候我有滾動條，其中顯示不同的圖標。單擊特定圖標后，將顯示 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。
1 回答
森林海
TA貢獻2011條經驗 獲得超2個贊
您可能想在輪播的滑動操作上注冊一個事件處理程序。像這樣的東西
$('#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>
添加回答
舉報
0/150
提交
取消