Question

当我点击内部链接时，我正试图隐藏一个列表项目。

<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()将事件处理程序绑定到click事件。

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

行$(this).parent().hide()是重要的一行。在这里，$(this)引用了点击的链接，因此在执行$(this).parent()时，我们可以访问<a>的父节点（标记），在这种情况下是<li>。将.hide()添加到其末尾会隐藏<li>，您就完成了。

要更新.updateNumber范围，请将此代码添加到您的点击处理程序功能中：

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

currentNumber++;

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

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

第二行currentNumber++;获取我们从span获得的当前值并将其递增1（++）位。

然后，我们想要用新的更新值替换范围中显示的文本，因此我们再次使用$.text()将新值重新放回范围：

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

请注意，使用$.text()而不传递要使用的字符串将检索元素的文本，而为$.text()提供"Hello world, I'm a string"这样的参数将被放置该字符串进入目标元素。

Here是由@Reigel自评论中自豪地制作和赞助的工作演示。

你如何使用jQuery点击里面的超链接隐藏一个li？

1 个答案: