Tôi có một vấn đề đã được giải quyết nhưng nó thật khó chịu.
Tôi có một mã js mà khi nhấn một nút bằng cách sử dụng "chắp thêm", nó sẽ đưa ra một số mã html và thông qua mã đó, tôi cung cấp id cho nút x và id cho phần tử vùng chứa. Tôi muốn sử dụng các id này để xác định chúng bằng chức năng nhấp chuột để xóa mã html:
varnum = 0;
$('.button').click(funcion(){
số++;
mã var = '\
\
';
$('.puthere').append(code);
$('#x' + num).click(function(){
$('#text' + num).remove();
});
});
Bây giờ phần khó chịu nhất là chức năng nhấp chuột trên x. Điều tôi mong đợi là mã này sẽ hoạt động như thế này: lần nhấp đầu tiên vào thành phần lớp "nút" sẽ cung cấp mã này:
$('#x1').click(function(){
$('#text1').remove();
});
Sau lần nhấp thứ hai tôi sẽ có cái này:
$('#x1').click(function(){
$('#text1').remove();
});
$('#x2').click(function(){
$('#text2').remove();
});
Những gì tôi nhận được sau lần nhấp thứ hai là:
$('#x1').click(function(){
$('#text2').remove();
});
$('#x2').click(function(){
$('#text2').remove();
});
Vì vậy, đây luôn là phần tử cuối cùng mà nút x muốn xóa. Câu hỏi của tôi là, tại sao biến "num" của tôi có thể giữ "1" ở #x1 nhưng không ở #text1?
Giải pháp của tôi là xử lý phần tử gốc thay thế:
$('#x' + num).click(function(){
$(this).parent('.container').remove();
});
Tôi biết, cũng có một tính năng "trực tiếp" mà tôi có thể sử dụng và tôi không cần phải loay hoay với id-s, nhưng điều này có vẻ nặng nề hơn. Có đúng không? Hay tôi đang phức tạp hóa mọi thứ mà không hiệu quả?
Điều này là do num mang tính toàn cục và bạn truy cập nó sau khi tạo nút thứ hai. Để giải quyết vấn đề này, bạn có thể bọc mã của mình bằng hàm tự thực thi ẩn danh:
(hàm(số) {
$('#x' + num).click(function(){
$('#text' + num).remove();
});
})(số);
Hoặc tốt hơn chỉ cần sử dụng một cú nhấp chuột
$('.parent').on('click', '.container > div', function() {
$(this).parent().remove();
});
Tôi là một lập trình viên xuất sắc, rất giỏi!