javascript - 使用 css 从 javascript 重定向

Question

我是一名 win32 业余编码员和新手网络程序员。对于我的个人元素，我正在尝试修改 codepen 中的待办事项列表代码。

http://codepen.io/arjancodes/pen/Bahkb

这是我的代码:

// get rid of default value in input box
$('input[name=toDoItem]').focus(function() {
  $(this).val('');
})

$('#add').click(function() {

  var $input = $('input[name=toDoItem]').val();

  if ($input.length > 0) {
    $('#list').append('<li class=' + 'close' + '>' + $input + '</li>');
  } else {
    alert("We'd all love to do nothing.");
  }

  // reset input box to no text
  $('input[name=toDoItem]').val('');
});

// remove list item
$('#list').on('click', '.close', function() {
  $(this).hide('2000', function() {
     $(this).remove();
  });

});

在此待办事项列表元素中，单击“x”按钮时，它会删除该行。但是当我点击文本时，它也会删除。我要做的是将删除按钮和文本分开。用户将写一个链接到输入框并将其添加到列表中。之后，用户将单击文本，页面将重定向到该链接。我希望有人能告诉我正确的方向，我不是要求为我编写所有代码!

Answer 1

这是一个开始:codepen .

如果你想让删除按钮和文本分开，它们应该是单独的元素。例如:

<li class='item'>Do Stuff <i class='close'></i></li>

CSS 已更新为 float <i>向右，并应用 :after按钮样式。
JS 已更新以匹配 .close并删除父/祖先 .item :

$('#list .item .close').on('click', function() { ... ; return false; } );

return false有没有这样点击.close不会“冒泡”事件并在 .item 上调用这个新处理程序:

$('#list').on('click', '.item', redirect_function);

redirect_function不是闭包，因为它在 #add 中被重新使用事件处理程序:

$('#list').append("<li class='item'>" + $input + "<i class='close'></i></li>")

至于重定向到另一个URL，你可以操纵window.location .但是，由于待办事项列表纯粹是客户端，因此不会持久化更改。

如果您想将 TODO 列表存储在服务器上，则必须将更改传达给服务器。传统上，这是使用类似的东西完成的:

<form method='post'>
  <ul>
    <li><input type='text' name='item[]' value='Stuff to do'/></li>
    <li><input type='text' name='item[]' value='....'/></li>
  </ul>
  <button type='submit' name='action' value='save-todo-list'>Save</button>
</form>

在服务器端，您将拥有一个脚本，该脚本从数据库中删除经过身份验证的用户的所有待办事项列表项，并插入 POST编辑元素。

或者，您可以使用 AJAX。例如，“删除元素”处理程序可以是

$('#list').on('click',  '.item .close', function() {
  $.ajax( {
     method: 'POST',
     url: "/api/todo/item/delete",
     data: ...
  }
} );

有 lots of resources on the matter .