Question

每当用户单击特定按钮时，我就会通过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);
    });

}

Answer 1

这是由您使用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>

通过jQuery创建新的DOM元素时，为什么要向其中添加空的Style属性？

1 个答案: