Question

请考虑以下事项：
HTML

 <div id="left">
    <a href="#target1" class="panel">Target 1</a><br/>
    <a href="#target2" class="panel">Target 2</a><br/>
    <a href="#target3" class="panel">Target 3</a><br/>
</div>

<div id="right">
    <div class="panel" id="target1" style="background:green">Target 1</div>
    <div class="panel" id="target2" style="background:red">Target 2</div>
    <div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>

JQuery的

jQuery(function($) {

$('a.panel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active'),
        animIn = function () {
            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        };

    if (!$target.hasClass('active') && $other.length > 0) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: -$this.width()
            }, 500, animIn);
        });
    } else if (!$target.hasClass('active')) {
        animIn();
    }
});

}); <br/>

如您所见，此代码（此处未包含css）会创建滑动div 我的问题是，我发现!$target.hasClass('active')将始终为FALSE，因为$target确实有一个活动的类，它是使用addClass('active')从上一个函数添加的。 $target.hasClass('active')为TRUE，而前面的Not运算符将使它始终为False。我的问题是，if语句在这种情况下如何执行？感谢。

Answer 1

animIn，在 no ＆＃34;有效＆＃34; class，添加＆＃34; active＆＃34;类。它可以直接调用，也可以响应动画结束。

var $target = $($(this).attr('href')),
    $other = $target.siblings('.active'),
    animIn = function () {
        $target.addClass('active').show().css({ // add class here
            left: -($target.width())
        }).animate({
            left: 0
        }, 500);
    };

if (!$target.hasClass('active') && $other.length > 0) {
    // not active, but has active sibling elements
    $other.each(function(index, self) {
        var $this = $(this);
        $this.removeClass('active').animate({
            left: -$this.width()
        }, 500, animIn); // invoke animIn as animation callback,
                         // adding the class after the animation
    });
} else if (!$target.hasClass('active')) {
    // not active, no other element active
    animIn(); // invoke animIn immediately,
              // adding the class right now
}
// and if it already has the class, do nothing

Answer 2

我的问题是我发现!$target.hasClass('active')总是假的，因为$ target确实有一个活跃的类

没有。如果$target.hasClass('active')没有活动类，则$target将为false。 !$target.hasClass('active')与此相反，因此在调用true函数之前它将为animIn()。

hasClass方法和if语句执行

2 个答案: