Как я могу переключить только элемент, который был нажат? И почему «щелчок» не стреляет?

Question

Переключатели применяются ко всем элементам с указанным классом. Как я могу изменить это только на элемент, на который я нажал?

<input type="file" id="file-input" multiple> 
<div id="file-list"> 
</div> 

$('#file-input').change(function(e) { 
    for (var i = 0, f; f = files[i]; i++) { 

     var reader = new FileReader(); 
     reader.readAsBinaryString(f); 
     .... 

     reader.onload = function(e) { 
     var label1, text1="Text1", labelEdit; 
     label1 = '<span class="editable">' + text1 + '</span> + 
        '<input class="editable" type="text" style="display:none">' 
     labelEdit = "<a class="edit">Edit</a> 

     $('file-list').append(label1, labelEdit);    

    } 
    } 
} 

$('.edit').click(function() { 
    $(this).closest('.editable').toggle(); 
    alert('clicked'); 
}); 

Я пытаюсь переключить ярлык и ввод перед ссылкой «Изменить». Как-то щелчок не стреляет. Что мне не хватает?

Answer 1

Try обернуть каждую метку и ввод в какой-то тег, скажут span, а затем с помощью мыши события, чтобы получить целевой элемент вы щелкнули, то с помощью этой цели вы можете получить предыдущую родственный с JQuery prev() методом и переключить его.

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

// your code here 
label1 = '<span><span class="editable">' + text1 + '</span> + 
     '<input class="editable" type="text" style="display:none"></span>'; 
labelEdit = "<a class="edit">Edit</a>"; 
// some code again 

тогда как это

$('.edit').click(function (e) { 
    $(e.target).prev().toggle(); 
});