Как мне заполнить всплывающее окно со значениями для цикла в JavaScript? - PullRequest
Новая
       22

Как мне заполнить всплывающее окно со значениями для цикла в JavaScript?

0 голосов
/ 14 мая 2019

Я создаю пользовательский интерфейс с javascript и некоторым 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 голосов
/ 14 мая 2019

Есть проблемы.Вы связываете событие в цикле 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 ) .....
    });

и исправить кнопку закрытия тоже

...