Советы по шаблону String Loop с кнопками - PullRequest
Новая
       53

Советы по шаблону String Loop с кнопками

0 голосов
/ 13 октября 2019

Я сейчас работаю над мини-веб-приложением и хотел бы получить совет. Я знаю причину своей проблемы, и я знаю один способ ее обойти, но это будет означать отмену большой части работы, которую я уже проделал.

Проблема, с которой я столкнулся, заключается в том, что я сейчас использую строку шаблонавнутри цикла for для печати данных, и у меня есть кнопка удаления со слушателем. В настоящее время это работает только для последней кнопки в списке, и я знаю, что это потому, что я уничтожаю innerHTML каждый раз, когда использую html = x.

Что я хотел бы знать, так это .... isЕсть ли простой способ обойти это, или я должен просто вместо этого использовать append child и т. д.? 

        for(let prod of products){
           console.log("Doc ID",doc.id);

        const li1 = `
            <p><div>${prod.name} <div class="right"><font class=pink-text>Location:</font> $${prod.location}  <button data-remove-button-id="${doc.id}" class="btn-remove">Delete</button></div></div></p>
        `;
        html += li1;

        } //end for loop




        const li2 = `
            <br />
            <button class="btn blue darken-2 z-depth-0 right modal-trigger" data-target="modal-prodedit">Add/Edit Attributes</button><br />
            </div>
            </li>
        `;
        html += li2;                    

        productList.innerHTML = html;


        const removeBtn = document.querySelector(`[data-remove-button-id="${doc.id}"]`);
        console.log("removeBTN",removeBtn);
        removeBtn.addEventListener('click', (e) => {
          e.preventDefault();
            console.log(`deleted row ${e.target.dataset.removeButtonId}`);
          });

Ответы [ 2 ]

0 голосов
/ 17 октября 2019

Спасибо всем за помощь в этом.

SelectAll работал до некоторой степени, но я решил переделать свой код с нуля, используя элементы DOM для appendChild. После того, как это было сделано, все стало намного проще. Решил изменить его, чтобы повысить гибкость кода.

0 голосов
/ 13 октября 2019

Вы используете метод querySelector (), который возвращает первый найденный элемент. Если вы хотите присоединить этот слушатель ко всем строкам, вам нужно использовать Document.querySelectorAll () . Вам нужно будет различать, какая строка была выбрана, а какая нет в вашей модели DOM. Поэтому я добавил бы к вашей кнопке атрибут data-product-id, и слушатель может использовать его, чтобы узнать, какой продукт был удален.

...