每当用户单击特定按钮时,我都会通过jQuery创建<li>
元素并将其附加到DOM。但是,将它们添加到DOM后,与<li style=""></li>
相比,它们显示为<li></li>
。为什么会这样呢?
我了解,从视觉上看,这不会造成问题。但是,在尝试在数组中查找特定元素的索引时确实会引起问题。
添加<li>
元素的函数:
function addNewTask(input) {
let userInput;
userInput = input;
let task = '<li><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>';
//parent = $('.task-list');
$('.task-list').append(task).children(':last').hide().fadeIn(250);
arr.push(task);
localStorage.setItem('items', JSON.stringify(arr));
console.log(arr);
}
尝试查找DOM元素的数组索引的函数(当前未按预期工作-无法通过指定的值找到索引):
$(document).ready(function () {
$(document).on('click', '.delete-task', function () { // We use 'on' as the element is dynamically added
console.log("'Delete' button pressed");
var $self = $(this);
var index = this.parentElement.outerHTML;
var findIndex = arr.indexOf(index);
arr.splice(findIndex, 1);
$self.parent().fadeOut(250, function() {
console.log($self.parent().html());
$self.remove(); // Dynamically remove the DOM element from the list
localStorage.setItem('items', JSON.stringify(arr));
console.log(localStorage.getItem('items'));
});
});
});
HTML预期输出:
<li><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>
HTML实际输出:
<li style=""><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>
更新(已解决问题!):
一旦
style
和.hide()
jQuery方法执行完毕,我就可以通过删除.fadeIn()
属性来解决该问题。修改后的代码:
function addNewTask(input) {
let userInput;
userInput = input;
let task = '<li><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>';
arr.push(task);
//parent = $('.task-list');
$('.task-list').append(task).children(':last').hide().fadeIn(250, function() {
console.log(this);
$(this).removeAttr('style');
localStorage.setItem('items', JSON.stringify(arr));
console.log(arr);
});
}
最佳答案
这是由您使用hide().fadeIn(250)
引起的。这些方法在受影响的元素上设置内联display
和opacity
CSS规则。过渡完成后,规则将被删除,但空的style
属性将保留。
如果在单击按钮添加新的li
之前检查了现有的li
元素,则可以在下面的代码段中看到这种情况:
function addNewTask(input) {
let task = '<li><span class="text-task">' + input + '</span><span class="delete-task">x</span></li>';
$('.task-list').append(task).children(':last').hide().fadeIn(250);
}
$('button').click(function() {
addNewTask('foobar');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="task-list">
<li>Foo</li>
</ul>
<button>Add</button>
如果要删除孤立的
style
属性(即使它没有害处),则可以在removeAttr()
的回调中调用fadeIn()
:function addNewTask(input) {
let task = '<li><span class="text-task">' + input + '</span><span class="delete-task">x</span></li>';
$('.task-list').append(task).children(':last').hide().fadeIn(250, function() {
$(this).removeAttr('style');
});
}
$('button').click(function() {
addNewTask('foobar');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="task-list">
<li>Foo</li>
</ul>
<button>Add</button>