Question

我正在快速使用jquery和woudl想知道如何编写以下代码，因此它更干一些并且使用$（this）

//Update Background Color
(function($) {
    //Find Background Colour
    var curColor = $('ul.product-categories li.current-item a').css('color');

    if($('ul.product-categories li').hasClass('current-item')) {
        //trying to use 'this' below but does not work
        //$(this).children('a').css({

        //This does work
        $('ul.product-categories li.current-item a').css({
            'background-color': curColor,
            'color': '#fff'
        });
    } else {
        $('ul.product-categories li.cat-item-11 a').css({
            'background-color': '#dd3c85',
            'color': '#fff'
        });
    };
})(jQuery);

有关如何改进的任何建议。我知道这可能很简单...

由于

Answer 1

下面是一个如何存储项目引用的示例，因此您不必一遍又一遍地使用jQuery选择器。

另请注意，最好放一个＆＃34; $＆＃34;在引用jQuery对象而不是普通变量的变量的开头，可以更容易地看到哪个

//Update Background Color
(function($) {

    //save a reference to the item
    var $item = $('ul.product-categories li.current-item a');

    //Find Background Colour
    var curColor = $item.css('color');

    if($item.hasClass('current-item')) {
        $item.css({
            'background-color': curColor,
            'color': '#fff'
        });
    } else {
        $item.css({
            'background-color': '#dd3c85',
            'color': '#fff'
        });
    };
})(jQuery);

Answer 2

更好地缓存＆＃39; DOM查询，以提高性能。

//Update Background Color
(function($) {
    //Find Background Colour
    var $categories = $('ul.product-categories');
    var $curr = $categories.find('li.current-item a');

    if(!$.isEmptyObject($curr)) {
        $curr.css({
            'background-color': $curr.css('color'),
            'color': '#fff'
        });
    } else {
        $categories.find('li.cat-item-11 a').css({
            'background-color': '#dd3c85',
            'color': '#fff'
        });
    }
})(jQuery);

使用jquery“this”和“selector”

2 个答案: