Использование Jquery для динамического создания Div с помощью кнопок, которые имеют функцию для закрытия DIV - PullRequest
Новая
       1

Использование Jquery для динамического создания Div с помощью кнопок, которые имеют функцию для закрытия DIV

0 голосов
/ 27 сентября 2019

Итак, я пытаюсь создать новые div фрукта, но я добавил X, чтобы вызвать специальную функцию, которая удалит его.Мои единственные проблемы - когда я динамически создаю свой div + span, у меня возникают проблемы, когда я пытаюсь использовать функцию onclick

Вот мой HTML-код 

<html>
    <div id="listContents">

    </div>
</html>

Также ниже мой скриптcode 

    list = ["apple", "strawberry", "banana"]
for(var i = 0; i < list.length; i++){
    $("#listContents").append('<div>' + list[i] + '<span class="picker" id="close" onclick="removeFruit(list[i].toString())"> (X)</span></div>');
}


function removeFruit(fruit){
    console.log("Here is the fruit you selected");
}

Очевидно, что я хочу иметь возможность удалить их при нажатии кнопки X, но сейчас у меня возникают проблемы с корректной работой функции onclick.Также вот jsfiddle Я быстро сделал

Ответы [ 3 ]

2 голосов
/ 27 сентября 2019

Вы создаете span с идентификатором close для каждого элемента в вашем списке.Идентификаторы должны быть уникальными во всем документе.Поскольку вы не используете атрибут id, я предлагаю вам удалить его.

Кроме того, вы добавляете событие onclick во все ваши элементы span.Я бы использовал делегирование события .

Более того, поскольку вы конвертируете элементы в вашем массиве в элементы HTML, вы можете использовать метод map для преобразованияи сгенерируйте весь HTML для ваших элементов.

Наконец, вы можете добавить атрибут данных для учета индекса элемента.Затем вы можете прочитать этот атрибут, используя метод jQuery data.

Учитывая это, код может выглядеть следующим образом: 

var list = ["apple", "strawberry", "banana"];
var $list = $("#listContents");
$list.on('click', '.picker', function(ev) {
    var idx = $(ev.target).data('idx');
    removeFruit(list[idx]);
});

$list.append(list.map(function(item, idx) {
    return '<div>' + item + '<span class="picker" data-idx="' + idx + '"> (X)</span></div>';
}).join(''));

function removeFruit(fruit) {
    console.log("Here is the fruit you selected");
}
0 голосов
/ 27 сентября 2019

вы можете добавить идентификатор, когда вы делаете карту. 

["apple", "strawberry", "banana"].map(x => {
  $("#listContents").append(`<div id="${x}"> 
    							${x}
                                <span 
                                  class="picker"
                                   onclick="(() => document.getElementById('${x}').remove())()">
                                  (X)
                                  </span>
                                </div>`)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listContents">
0 голосов
/ 27 сентября 2019

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

Кроме того, когда вы динамически создаете элементы, вы даете каждому onClick строку "removeFruit(list[i].toString())", поэтомуна самом деле он не ищет функцию с именем removeFruit, но вместо этого имеет фактическую строку «removeFruit».

При создании html вы можете вместо этого присвоить каждому элементу атрибут fruitName, равный названию фрукта, напримертак.

list = ["apple", "strawberry", "banana"]
        for (var i = 0; i < list.length; i++) {
            $("#listContents").append('<div>' + list[i] + '<span class="picker" fruitName='+ list[i] + '>(X)</span></div>');
        }

и затем мы можем настроить таргетинг на них, используя прослушиватель щелчков, а не onClick и использовать то, чему равен fruitName, используя $(this).attr('fruitName'). 

$("#listContents").on('click', '.picker', function(e) {
            removeFruit($(this).attr('fruitName'))
        })


        function removeFruit(fruit) {
            console.log('You clicked ' + fruit);
        }

$(this) будет отображаться в зависимости от того, на какой интервал вы щелкнули, и .attr() будет искать fruitName и найдет то, чему он равен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...