Question

我有多个按钮元素，我想为每个元素创建一个单独的输入元素来加载图片。按钮有一个 img 元素，很快就会有一个加载图片的来源。输入元素数量应与按钮数量相同。

当我查看这里的一些提示时，我首先在循环中创建输入，然后尝试在单独的循环中触发每个输入上的点击事件。但不幸的是，结果我看到所有 button 都指向最后一个 input

pix = $("button[id*='picture-add-']") // all buttons I have
for (var i = 0; i < pix.length; ++i){
    i_selector = i+1 
    new_input = $('<input>', {
        id:"file-input-" + i_selector.toString(),
        type:"file",
        name:"name",
        style:"display: none;",
        accept:"image/gif, image/jpeg, image/png, image/jpeg"}).appendTo('#addNew') // each input is added to main bootstrap window
}
for (let i = 0; i < pix.length; ++i){
    i_sel = i+1
    pic_element_id = pix[i].id 
    input_element_id = $('#file-input-' + i_sel.toString())[0].id
    $('#' + pic_element_id).click(function(){
        $('#' + input_element_id).trigger('click')
        console.log(pic_element_id, 'pic_element_id')
        console.log(input_element_id) 
    })
}

每当我单击任何按钮时，控制台都会打印出我按下了最后一个按钮。这其中的哪一部分可能是错误的？

在循环中设置事件仅适用于最后一个元素（jquery）

0 个答案: