Question

嗨，这可能是不寻常的，但我需要将此代码扩展为更易读的形式，以便我可以取消它所做的事情，然后我可以扩展代码，使其能够完成我需要它做的事情。这是代码：完整（取自here）

$(function(){

 // Bind an event to window.onhashchange that, when the hash changes, gets the
 // hash and adds the class "selected" to any matching nav link.
 $(window).hashchange( function(){
   var hash = location.hash;

// Set the page title based on the hash.
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';

// Iterate over all nav links, setting the "selected" class as-appropriate.
$('.article a').each(function(){
  var that = $(this);
  that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
});
})

// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();

});

我不明白的具体路线就是这个：

  that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );

在我的发展阶段，这对我来说是难以理解的。我想学习。我的意思是，我得到它正在做的100％...但我不知道如何用这种代码影响“那个”的父母，我不知道我把“父母”放在哪里？

Answer 1

此

that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );

是可怕的代码行，它使用三元（?:）运算符来选择要调用的函数。

长期以来，它将是：

if (that.attr('href') === hash) {
    that.addClass('selected');
} else {
    that.removeClass('selected');
}

原始代码利用了

这一事实

$(this).foo与$(this)[foo]相同，所以
that.foo与that[foo]相同，所以
that.foo(args)与that[foo](args)

然后为了使事情进一步复杂化，他们将foo作为条件表达式！

Answer 2

我以前从未见过那种建筑。它实际上是

if (that.attr('href') === hash) {
    that.addClass('selected');
} else {
    that.removeClass('selected');
}

使用jQuery.addClass === jquery['addClass']并且两者的值都是可以调用的函数。

Answer 3

 $.fn.extend({
    activeClass: function(className, active) {
        this[active ? 'addClass': 'removeClass'](className);
        return this;
    }
});

然后您可以像

一样使用它

$('body').activeClass('some-class-name',true);

如果last var为false，则将删除正文中的类

jQuery - 帮我把这个速记更加冗长

3 个答案: