Question

我正在尝试通过创建待办事项列表来练习一些jQuery。到目前为止，除了在删除列表项后隐藏“删除所选项”按钮之外，我已经弄明白了大部分内容。

该过程是在输入字段中创建待办事项，结果显示为有序列表。当在列表中单击某个项目并进行了删除时，将显示“删除所选项目”按钮。我尝试过不同的方法来删除使用条件的按钮，但这不起作用。这是我的代码。

HTML：

<form id="create-todos">
  <input type="text" name="todo-item" id="todo-item">
  <button id="submit-todo">Add</button>
</form>

<div id="todo-results">
  <ol id="todo-result-list"></ol>
  <button id="delete-striked">Delete Selected Items</button>
</div>

CSS：

.striked-item {
  text-decoration: line-through;
}

#delete-striked {
  display: none;
}

JQUERY：

function submitTodoItem () {
  var todoVal = $('#todo-item').val();
  $('#todo-result-list').append('<li class="result-list-item">' + todoVal + '</li>')
  $('#todo-item').val('');
}

$(function() {
  $('#submit-todo').on('click', function(e) {
    e.preventDefault();
    submitTodoItem(); 
  });
});

function deleteListItem(e, listItem) {
  e.preventDefault();
  $(listItem).addClass('striked-item');

  if($(listItem).hasClass('striked-item')) {
    $('#delete-striked').show();
  }
  if($(listItem).length === 0) {
    $('#delete-striked').hide();
  }
}

$(function() {
  $('#todo-result-list').on('click', '.result-list-item', function(e) {
    var listItem = this;
    deleteListItem(e, listItem);
  });
});

function deleteAll() {
  var resultItem = $('.result-list-item');
  resultItem.each(function() {
    if($(this).hasClass('striked-item')) {
      $(this).remove();
    }
  });
}

$(function() {
  $('#delete-striked').on('click', function() {
    deleteAll();
  });
});

$(function() {
  var listItem = $('#todo-result-list li');
  if($(listItem.length) === 0) {
    $('#delete-striked').fadeOut();
  }
});

这是我的演示JSFiddle的链接。

Answer 1

只需隐藏删除按钮即可。

$（ '＃删除-删除线'）隐藏（）;

这是一个有效的解决方案！

math.floor()

function submitTodoItem () {
  var todoVal = $('#todo-item').val();
  $('#todo-result-list').append('<li class="result-list-item">' + todoVal + '</li>')
  $('#todo-item').val('');
}

$(function() {
  $('#submit-todo').on('click', function(e) {
   e.preventDefault();
   submitTodoItem(); 
  });
});

function deleteListItem(e, listItem) {
  e.preventDefault();
  $(listItem).addClass('striked-item');
  if($(listItem).hasClass('striked-item')) {
    $('#delete-striked').show();
  }
  if($(listItem).length === 0) {
    $('#delete-striked').hide();
  }
}

$(function() {
  $('#todo-result-list').on('click', '.result-list-item', function(e) {
    var listItem = this;
    deleteListItem(e, listItem);
  });
});

function deleteAll() {
  var resultItem = $('.result-list-item');
  resultItem.each(function() {
    if($(this).hasClass('striked-item')) {
      $(this).remove();
    }
  });
  $('#delete-striked').hide();
}

$(function() {
  $('#delete-striked').on('click', function() {
    deleteAll();
  });
});

var resultItem = $('#todo-result-list li');
if($(resultItem.length) === 0) {
  $('#delete-striked').fadeOut();
}

.striked-item {
  text-decoration: line-through;
}

#delete-striked {
  display: none;
}

Answer 2

单击“删除”按钮并尝试检查列表是否为空，并完成了它的工作。

$(function() {
  $('#delete-striked').on('click', function() {
    deleteAll();
  if($('.result-list-item').length === 0) {
    $(this).hide();
  }
  });
});

所以你也可以删除这个错误的代码片段：

if($(listItem).length === 0) {
   $('#delete-striked').hide();
 }

这在您的代码中永远不会发生。

Answer 3

在检查元素是否包含任何内容（ length，.html（））之后，您还可以通过添加Css类来隐藏按钮，例如。＆＃34;隐藏＆＃34;

$("#delete-striked").addClass("hidden");

在某些情况下，删除和添加类可能会有用或更容易，如果您考虑过您可能想要在列表中添加更多待办事项（使用 .removeClass（）删除“隐藏的”类。

无论您喜欢什么，如果您使用 .hide（），您可以使用 .show（）再次显示该按钮。

Answer 4

删除后：检查是否有任何带有'result-list-item'类的元素。如果没有隐藏按钮。

$（'result-list-item'）。get（）返回一个数组，其中包含'result-list-item'的匹配元素


如果该数组的长度较小1隐藏按钮

$(function() 
{
    $('#delete-striked').on('click', function() 
    {
        deleteAll();
        if($('.result-list-item').get().length < 1)
        {
            $('#delete-striked').hide();
        }
    });
});

设置删除按钮以在删除所有列表项后隐藏

4 个答案: