1

我目前正在学习 js 和 jquery 来帮助我进行设计，我遇到的一个常见问题是我可以让它做我想做的事情，但我不知道它的编码方式是否有效. 谁能看到更好的编码方式：

$(".cal-check a").click(function(e) {
e.preventDefault();
$(".agenda").addClass("active");
});

$(".agenda .close-panel").click(function(e) {
e.preventDefault();
$(".agenda").removeClass("active");
});

我想单击一个日历事件，然后它将活动的课程添加到日历中称为议程的另一个课程中，然后它会调出议程。然后我通过单击关闭面板元素将其删除。非常感谢

4

4 回答 4

1

您可以像这样缓存 .agenda 选择器：

var $agenda = $(".agenda");

$(".cal-check a").click(function(e) {
    e.preventDefault();
    $agenda.addClass("active");
});

$agenda.find(".close-panel").click(function(e) {
    e.preventDefault();
    $agenda.removeClass("active");
});​
于 2012-12-20T13:05:05.373 回答
0

我建议不要更改类，这通常会在浏览器上相当密集，因为一个类更改将意味着所有类都必须重新解析。这对于更具侵略性的东西（如动画）通常是非常糟糕的，但如果您有性能方面的考虑，您应该考虑到这一点。

于 2012-12-20T13:08:46.223 回答
0

我认为这已经很有效了。将来可能会有所帮助的事情是尝试尽可能少地潜入 DOM。在这个小例子中，它不会有所作为，但例如为议程类创建一个变量，而不是每次都使用 jquery 来获取它。

var agendaClass = $(".agenda");

$(".cal-check a").click(function(e) {
e.preventDefault();
agendaClass .addClass("active");
});

$(".agenda .close-panel").click(function(e) {
e.preventDefault();
agendaClass .removeClass("active");
});
于 2012-12-20T13:10:17.347 回答
0

这应该足够有效。如何优化代码很大程度上取决于您的 DOM 结构。

在幕后，带有 Sizzle 搜索引擎的 jQuery 将使用内置方法进行 DOM 搜索，如果这些方法可用的话（原生搜索总是比使用 JS 完成的搜索更快）。在您的情况下，一切都应该没问题，尤其是在现代浏览器中，因为它们具有querySelectorAll并且选择.cal-check a器.agenda将使用该内置方法执行。此外，还有getElementByClassName可用于查找.agenda.

大多数现代浏览器都支持这两种方法（只要链接有支持的浏览器列表），因此使用选择器谈论 IE8+、Firefox 和 Chrome 等浏览器将足够快。同时 IE7 没有上述功能，Sizzle 将被迫通过无数元素来寻找你正在寻找的元素。也许您可以限制指定某个具有 id 的容器的数量，在这种情况下，它只会查看该元素的内部： $("#someId .agenda")例如。您可能还需要添加一些标签：$("#someId div.agenda"). 这样，您将限制在#someId(getElementById) 内部使用 div（可以使用 getElementsByTagName）搜索的元素数量。这样你就可以提高 IE7 和其他不支持的旧浏览器的getElementByClassName速度querySelector

另外，您可以缓存搜索结果，因为这里已经提到过。

于 2012-12-20T13:32:35.300 回答