如何使用JavaScript中for循环的值填充弹出窗口?

时间:2019-05-14 04:04:11

标签: javascript for-loop popupwindow

我正在使用javascript和一些jquery构建用户界面,这些jquery由来自一系列产品及其单个详细信息的for循环填充。一旦产品加载了删节的详细信息,我希望用户能够单击“详细信息”按钮,该按钮将使一个弹出窗口出现,显示所选项目的完整详细信息。我可以正常工作,但是窗口是由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");
});

    }};

1 个答案:

答案 0 :(得分:0)

有问题。 您将事件绑定到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 ) .....
    });

并修复关闭按钮