gpt4 book ai didi

jQuery 选择器,通过 anchor ID 概括选择器

转载 作者:行者123 更新时间:2023-12-01 03:55:26 27 4
gpt4 key购买 nike

我的网站上有一些代码,用于显示博客上的文章列表,如下所示(将有多个具有相同类别的对象):

<ul class="article category1">
<li> etc
<li>
</ul>
<ul class="article category2">
<li> etc
<li>
</ul>
<ul class="article category3">
<li> etc
<li>
</ul>

我有一些 jQuery 代码可以过滤列表,因此您只能显示一个类别,如下所示:

$("#showall").click(function() {
$("ul.article").show('fast');
});
$("#showcategory1").click(function() {
$("ul.article.category1").show('fast');
$("ul.article").not("ul.category1").hide('fast');
});

当您点击相关链接时,即

<a id="showall">All</a>
<a id="category1">Category 1</a>

目前我有大约 9 个类别需要处理,因此有 10 个 jQuery 片段,这看起来效率非常低(它效率非常低)。我不知道如何概括代码,以便它接受 anchor 的 ID(或者可能是类),然后将其应用到相关列表。请问有什么帮助吗?

谢谢!

<小时/>

最佳答案

您可以通过类别列表来通用化代码:

$("#showall").click(function() {
$("ul.article").show('fast');
});

var cats = "food cars books";
$.each(cats.split(" "),
function(cat) {
$("#show"+cat).click(function() {
$("ul.article."+cat).show('fast');
$("ul.article").not("ul."+cat).hide('fast');
});
});

这不会改变运行时行为,只是减少了创建函数所需的代码量。这里的关键思想是 jQuery 选择器不必是文字字符串,它们可以由文字和变量构造。

关于jQuery 选择器,通过 anchor ID 概括选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3278224/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com