[英]How do I populate a popup window with values from a for loop in javascript?
我正在構建一個帶有javascript和一些jquery的用戶界面,這些jquery由一系列產品及其各自的詳細信息填充。 一旦產品加載了刪節細節,我希望用戶能夠點擊“詳細信息”按鈕,該按鈕將顯示一個彈出窗口,顯示所選項目的完整詳細信息。 我有一切工作,但窗口是由for循環創建的最后一項填充,而不是所選項目。 我是javascript的新手,並沒有找到任何適合這個問題的解決方案。 有關如何實現這一目標的任何想法?
document.body.onload = addElement;
function addElement () {
for(i = 0; i < items.length; i++) {
//Create elements for items and pop windows, and html for individual item details
var prodDiv = document.createElement("div");
var popDiv = document.createElement("div");
// Add the rest of the html and looped data to variables
var popUpWindow = "<div class='popup-content'>" + divName + divPrice + divBrand + rating + prodId + divLong + "</p><button class='close'>Close</button></div></div>";
var blob = divImage + divName + divPrice + divBrand + divShort;
//Account for null values
if(items[i].brand == null) {
if(items[i].salePrice == null) {
var blob = divImage + divName + divPrice + divShort + dtlButton;
} else {
var blob = divImage + divName + divSale + divShort + dtlButton;
}
} else {
if(items[i].salePrice == null) {
var blob = divImage + divName + divPrice + divBrand + divShort + dtlButton;
} else {
var blob = divImage + divName + divSale + divBrand + divShort + dtlButton;
}
}
//Add item info to HTML element
prodDiv.innerHTML = blob;
popDiv.innerHTML = popUpWindow;
//Add class attributes
prodDiv.setAttribute("class", "col-sm-4 col-lg-2 prodContent");
popDiv.setAttribute("class", "popup-overlay");
//Add new element to div
var currentDiv = document.getElementById("allDiv");
currentDiv.appendChild(prodDiv);
currentDiv.appendChild(popDiv);
//Appends an "active" class to .popup and .popup-content when
the "Open" button is clicked
$(".open").on("click", function(){
$(".popup-overlay, .popup-content").addClass("active");
});
//Removes the "active" class to .popup and .popup-content when
the "Close" button is clicked
$(".close, .popup-overlay").on("click", function(){
$(".popup-overlay, .popup-content").removeClass("active");
});
}};
有一些問題。 您在for循環中綁定事件,並且為類選擇器綁定事件=>所有存在按鈕將再次綁定。
這意味着,如果你有10個項目,第一個按鈕將調用10次點擊功能。 您應該將它們移到外面以進行循環,或更改選擇器。
當你點擊一個按鈕時,你必須告訴jquery完全顯示彈出窗口
你可以這樣改變:
1:添加一些東西來識別彈出窗口
var popUpWindow = "<div class='popup-content itemid-"+ yourItemId +"'>"
2:然后,只綁定到右鍵
$(prodDiv).find(".open").on("click", function(e){
//do smthing to show right div,
// $(".itemid-"+yourItemId ) .....
});
並修復關閉按鈕
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.