Блог

Главная - Вопросы по программированию - Установите идентификатор приращения в значение Динамически создаваемого элемента (DIV) и назначайте событие onclick каждому DIV

Установите идентификатор приращения в значение Динамически создаваемого элемента (DIV) и назначайте событие onclick каждому DIV

#javascript

Вопрос:

Я создаю динамически DIV и устанавливаю идентификатор на основе запроса на успех AJAX :

 $.ajax({

                        type: "POST",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: '{ goodsName: '   JSON.stringify(data.goodsName)   '}',

                        url: "calendarView.aspx/getSparepartsFilter",
                        success: function (data, status, xhr) {

                            var divResult = $('#divResult');
                            divResult.empty();
                            $.each(data.d, function (i, v) {

                                   
                                    divResult.append('<div class="col-lg-12 addPart" id="divAddPart"  style="display:block; margin-bottom:3px; cursor:pointer; padding:5px 10px; color:#333; font-size:.8rem; text-decoration:none; border:1px solid #ccc; background:#fafafa ">'   v.goodsName   ' <i class="fa fa-rw fa-circle" style="color:black; margin-left:15px; margin-right:15px; font-size:.4rem;"></i> '   v.goodsCode   ' <i class="fa fa-rw fa-circle" style="color:black; margin-left:15px; margin-right:15px; font-size:.4rem;"></i> Qty: '   v.nowStock   ' Available <i class="fa fa-rw fa-circle" style="color:black; margin-left:15px; margin-right:15px; font-size:.4rem;"></i> <input type="number" value="1" width="20px"></input></div>');
                                    count  ;

                               
                                }

                            });



                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert("Status: "   textStatus); alert("Error: "   XMLHttpRequest.responseText);
                        }

                    })

И я также создаю событие в один клик для этих динамически создаваемых DIV :

 $(document).on('click', '#divAddPart', function () {//do something})
                    var e = document.getElementById("divAddPart");
                    var c = window.getComputedStyle(e).backgroundColor;
                    console.log(c);
                    if (c === "rgb(250, 250, 250)") {
                        document.getElementById("divAddPart").style.background = "#80c904";
                    } else {
                        document.getElementById("divAddPart").style.background = "#fafafa";
                    }
                })

Эти события были назначены только первому созданному DIV, так как я не создавал идентификатор приращения для каждого DIV.

Мой вопрос в том, как создать идентификатор приращения для каждого DIV, а также назначить событие. Я думаю, что он должен создать counter переменную и назначить счетчик позади <div id="divAddPart" counter ""></div>

Но как назначить событие для каждого идентификатора приращения ?

Я попытался обновить событие onclick и все равно ошибка :

 for (let i = 0; i < counter.length; i  ) {
  $(document).on('click', '#divAddPart' i '', function () {
                        var e = document.getElementById("divAddPart" i "");
                        var c = window.getComputedStyle(e).backgroundColor;
                        console.log(c);
                        if (c === "rgb(250, 250, 250)") {
                            document.getElementById("divAddPart" i "").style.background = "#80c904";
                        } else {
                            document.getElementById("divAddPart" i "").style.background = "#fafafa";
                        }
                    })
}

Комментарии:

1. id=»divAddPart» может быть id=»divAddPart» счетчик и одновременно увеличивать этот счетчик (возможно, в следующей строке. Я бы также поместил onClick=»Некоторая функция(счетчик)» в эту строку и сделал вашу функцию onClick отдельной функцией, например, некоторую функцию(счетчик), которую нужно вызвать, используя счетчик в качестве параметра.

Ответ №1:

Вы могли бы создать функцию вместо динамического добавления onClick в div:

 function someFunction(counter) {
var e = document.getElementById("divAddPart" counter);
var c = window.getComputedStyle(e).backgroundColor;
console.log(c);
if (c === "rgb(250, 250, 250)") {
    document.getElementById("divAddPart" counter).style.background = "#80c904";
} else {
    document.getElementById("divAddPart" counter).style.background = "#fafafa";
}}

И сделайте так, чтобы ваша строка добавления div вызывала эту функцию

                                    divResult.append('<div class="col-lg-12 addPart" id="divAddPart" counter onClick="someFunction(counter)"  style="display:block; margin-bottom:3px; cursor:pointer; padding:5px 10px; color:#333; font-size:.8rem; text-decoration:none; border:1px solid #ccc; background:#fafafa ">'   v.goodsName   ' <i class="fa fa-rw fa-circle" style="color:black; margin-left:15px; margin-right:15px; font-size:.4rem;"></i> '   v.goodsCode   ' <i class="fa fa-rw fa-circle" style="color:black; margin-left:15px; margin-right:15px; font-size:.4rem;"></i> Qty: '   v.nowStock   ' Available <i class="fa fa-rw fa-circle" style="color:black; margin-left:15px; margin-right:15px; font-size:.4rem;"></i> <input type="number" value="1" width="20px"></input></div>');
Метки: