如何使用jQuery点击里面的hyerplink时隐藏li？

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属性中的URL <a>.

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

要更新.updateNumber范围,请将此代码添加到单击处理函数中:

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

currentNumber++;

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

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

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

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

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

请注意,使用$.text()而不传递它将使用的字符串将检索元素的文本,而提供$.text()诸如"Hello world, I'm a string"将该字符串放入目标元素的参数.

这是一个由@Reigel自评论中自豪地制作和赞助的工作演示.