javascript - 当使用 jQuery 单击其中的 hyerplink 时，如何隐藏 li？

Question

当点击里面的链接时，我试图隐藏一个 li 列表项

<ul>
<li id="list_1" class="list"><a href="http://">hide</a>
</li>

<li id="list_2" class="list"><a href="http://">hide</a></li>

<li id="list_3" class="list"><a href="http://">hide</a></li>

<li id="list_4" class="list"><a href="http://">hide</a></li>
</ul>

<span class="updateNumber">0</span>​

并且每次隐藏 li 项时，将 updateNumber 文本的数量增加 1。谢谢

Answer 1

这应该可以解决问题:

$('li a').on('click', function(e) {
    e.preventDefault();

    $(this).parent().hide();
});

选择器li a查找所有<a>任何 <li> 内的标签(我在这里保持简单，所以它会很贪婪)。然后我们使用 $.on() 将事件处理程序绑定(bind)到 click事件。

现在我们使用匿名函数(没有名称的函数)来完成我们的工作。在这里，我们传递 e作为参数进入函数。 e包含事件对象，因此我们可以执行 e.preventDefault()在下一行。此行停止浏览器在链接上执行默认行为，即导航到 href 中的 URL。 <a> 中的属性标签。

线路$(this).parent().hide()是最重要的。在这里，$(this)引用被单击的链接，这样做 $(this).parent() 我们可以访问 <a> 的父节点(标签)这是一个 <li>在这种情况下。添加 .hide() 它的末尾隐藏了 <li>你就完成了。

<小时/>

更新您的 .updateNumber span，将此代码添加到您的点击处理函数中:

var currentNumber = parseInt($('.updateNumber').text());

currentNumber++;

$('.updateNumber').text(currentNumber);

第一行从范围内的文本中获取一个整数，并将其分配给名为 currentNumber 的变量。 。 parseInt() 将尝试将范围内的任何内容转换为整数。

第二行currentNumber++;获取我们从跨度中获得的当前值并将其增加一位(++)。

然后，我们希望用新的更新值替换跨度中显示的文本，因此我们使用 $.text() 将新值放回到跨度中。再次:

$('.updateNumber').text(currentNumber);

请注意，使用 $.text()如果不传递一个字符串来使用，将检索元素的文本，而提供 $.text()带有诸如 "Hello world, I'm a string" 之类的参数将该字符串放入目标元素中。

<小时/>

Here是一个工作演示，由@Reigel 根据评论自豪地制作和赞助。