每当用户单击特定按钮时,我都会通过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)引起的。这些方法在受影响的元素上设置内联displayopacity 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>

08-25 17:40
查看更多