0

我有以下 jQuery 语句，它工作正常，但我想知道它是否可以缩短，如果让它更简洁是否会提高性能？

奇怪的起始标签的原因是它是用于 wordpress 主题的。

提前干杯！

jQuery(document).ready(function($) {

$(".sidebar ol#navigation li.work a").click(function() {
$("#content #second_nav").toggle("fast");
$("#content #second_nav ul.options_3").css('display','none');
$("#content #second_nav ul.options_2").css('display','none');
$("#content #second_nav ul.options_4").css('display','none');
$('.active_2').removeClass('active_2');
$('.active').removeClass('active');
$(this).toggleClass('selected');
});

$("#content #second_nav ul.options li a#work").click(function() {
    $('.active').removeClass('active');
    $(this).attr('class','active');
    $("#content #second_nav ul.options_2").toggle("fast");
    $("#content #second_nav ul.options_4").css('display','none');
    $("#content #second_nav ul.options_3").css('display','none');
    });

$("#content #second_nav ul.options li a#writing").click(function() {
    $('.active').removeClass('active');
    $(this).attr('class','active');
    $("#content #second_nav ul.options_4").toggle("fast");
    $("#content #second_nav ul.options_3").css('display','none');
    $("#content #second_nav ul.options_2").css('display','none');
    $('.active_2').removeClass('active_2');
    });

$("#content #second_nav ul.options_2 li a#collage").click(function() {
    $('.active_2').removeClass('active_2');
    $('ul.options_3').css('display','none');
    $(this).attr('class','active_2');
    $("#content #second_nav ul.options_3#collage").toggle("fast");
    });

$("#content #second_nav ul.options_2 li a#painting").click(function() {
    $('.active_2').removeClass('active_2');
    $('ul.options_3').css('display','none');
    $(this).attr('class','active_2');
    $("#content #second_nav ul.options_3#painting").toggle("fast");
    });

$("#content #second_nav ul.options_2 li a#print").click(function() {
    $('.active_2').removeClass('active_2');
    $('ul.options_3').css('display','none');
    $(this).attr('class','active_2');
    $("#content #second_nav ul.options_3#print").toggle("fast");
    });

$("#content #second_nav ul.options_2 li a#photo").click(function() {
    $('.active_2').removeClass('active_2');
    $('ul.options_3').css('display','none');
    $(this).attr('class','active_2');
    $("#content #second_nav ul.options_3#photo").toggle("fast");
    });

});
4

3 回答 3

5

出于性能考虑：

  1. 最好在选择器中使用尽可能少的节点的ID和 CLASSES。如果您使用 ID，请不要指定标签。所以比使用本机 javascript$('#myId');快得多。如果您指定标签，那么它会采用更复杂的选择策略。此外，ID 在 DOM 中应该是唯一的，所以不要 使用. 越短越快越好。$('a#myId');getElementById()$("#content #second_nav ul.options_2 li a#photo")$("#photo");

  2. 如果您打算多次使用它们，请缓存您选择的 DOM 元素：

    var secondNav= $("#content #second_nav");
secondNav.toggle("fast");

  3. 为简洁起见，如果它们共享相同的操作，您可以在选择器中指定多个元素。例如：

    var secondNav = $("#content #second_nav");
secondNav.toggle("fast");
$("ul.options_3, ul.options_2, ul.options_4",secondNav).hide();
$('.active_2').removeClass('active_2');
$('.active').removeClass('active');
$(this).toggleClass('selected');

希望这可以帮助...

于 2009-07-28T13:49:09.410 回答
1

有几件事要做。想到的最明显的一个是使用变量。

var $option2 = $("#content #second_nav ul.options_2");
var $option3 = $("#content #second_nav ul.options_3");
var $option4 = $("#content #second_nav ul.options_4");

然后，您可以在任何有长选择器的地方加入变量。

$option2.css('display', 'none');
$option3.css('display', 'none');
$option4.css('display', 'none');

应该有助于提高性能、可读性和重复性。

于 2009-07-28T13:50:38.750 回答
1

$("#content #second_nav ul.options_3").css('display','none'); $("#content #second_nav ul.options_2").css('display','none');

== $("#content #second_nav").find("ul.options_3,ul.options_2").css('display','none');

于 2009-07-28T13:57:42.363 回答