使用css从javascript重定向

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

这是我的密码：

// 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();
  });

});

//去掉输入框中的默认值
$（'input[name=toDoItem]'）。焦点（函数（）{
$（this.val（“”）；
})
$（'#添加'）。单击（函数（）{
var$input=$（'input[name=toDoItem]'）。val（）；
如果（$input.length>0）{
$（'#list'）.append（'
'+$input+'
'）；
}否则{
警惕（“我们都喜欢什么都不做。”）；
}
//将输入框重置为无文本
$（'input[name=toDoItem]'）。val（''；
});
//删除列表项
$（'#list'）。on（'单击'，'.close'，函数（）{
$（this.hide（'2000'，function（））{
$（this.remove（）；
});
});

---

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

您应该使用如下结构：

<li>
    ToDo text
    <div class="close"><div>
</li>

待办事项文本

这是一个开始：

如果要将“删除”按钮和文本分开，则它们应该是单独的元素。例如：

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

存在

返回false

，因此单击

.close

不会“冒泡”事件并在

项上调用此新处理程序：

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

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

redirect_函数
不是闭包，因为它在
#add
事件处理程序中重复使用：

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

在服务器端，您将有一个脚本，用于从数据库中删除经过身份验证的用户的所有todo列表项，并插入
POST
ed项

或者，您可以使用AJAX。例如，“delete item”处理程序可以是

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

有。
也许在文本中使用真正的
a href
？我肯定会这样做，但我不清楚
href
的值应该是什么。谢谢Kenney。这是一个非常明确的起点。很明显，我应该改进我的“元素”科目。您在单击文本时添加了警报（“文本”）。把点击的文本发布成字符串怎么样？我更新了代码笔。通常，在事件处理程序中，
这是事件发生的元素。然后可以使用
this.textContent
作为示例。出于好奇，您打算如何存储待办事项列表，使其持久化？作为javascript重定向URL函数的替代方法，您可以将以下行替换为：
$（'#list'）.append（
“+$input+”
”）
，对于此行：
$（'#list'）.append（
）
然后将“在此处键入内容”切换为“在此处输入您的url”。所以用户写了一些类似“www.google.com”的东西，做得很好。
$('#list').on('click',  '.item .close', function() {
  $.ajax( {
     method: 'POST',
     url: "/api/todo/item/delete",
     data: ...
  }
} );