jQuery：CSS 的 not 和多个选择器有问题答案

【问题标题】：jQuery: Having trouble with not and multiple selectors for CSSjQuery：CSS 的 not 和多个选择器有问题
【发布时间】：2014-01-24 19:06:24
【问题描述】：

我有许多 div（CSS 类“组”），当点击其中一个时，其他的被隐藏，点击的一个被展开（获得“详细”CSS 类）。然后，当单击展开的 div ('.group .detailed) 时，它应该调整大小并丢失 'detailed' 类。我的问题是，我无法在“组”div 上获得点击事件，这些 div 也包含“详细”以被我的第一个 jquery 函数忽略并激活我的第二个 jquery 函数。这是我的代码：

$('.group:not(.detailed)').mousedown(function(){
    var $self = $(this);
    var speed = 3250;
    var offset = {x : $self.offset().left, y : $self.offset().top};

    readyAnimation();

    $('.group').not($self).addClass('hide');
    $self.animate({'width' : '100%', 'height' : '+=' + '300px'}, {left: 'offset.x' + 'px', top: 'offset.y' + 'px'}, speed);

    function readyAnimation () {
        $self.css({display : 'block'});
        $self.css({'-webkit-box-sizing' : 'border-box', '-moz-box-sizing' : 'border-box', 'box-sizing' : 'border-box'});
        $self.css({margin : '0px'});
    };

    $self.addClass('detailed');
});


$('.group.detailed').mousedown(function(){
    var $self = $(this);
    var size = '300px';
    var speed = 3250;

    console.log("it worked");

    resetAnimation();

    $self.animate({'width' : size, 'height' : size}, speed)
    $('.group').removeClass('hide');

    function resetAnimation () {
        $self.css({display : ''}); //Empty quotes resets the CSS value to what it was originally (in the CSS file)
        $self.css({'-webkit-box-sizing' : '', '-moz-box-sizing' : '', 'box-sizing' : ''});
        $self.css({margin : ''});
    };

    $self.removeClass('detailed');
});

我认为我不需要为此发布我的 HTML 和 CSS，但在我之前提出的问题中可以看到 here。感谢阅读。

编辑：Here's a link to the fiddle

编辑 2：请参阅 vahapwns、Jonathan 和 giordanolima 的代码工作演示答案。通过将这两个函数组合在一起并使用 if 语句检查“详细”，解决了由第一个函数覆盖第二个函数引起的问题。谢谢大家的意见。

【问题讨论】：

请创建一个 finddle - jsfiddle.net
这是小提琴！ jsfiddle.net/V93dq
问题不在于第一个函数覆盖了第二个函数，而是代码运行时没有“.group.detailed”，因此第二个 mousedown 事件永远不会附加到任何元素。

标签： javascript jquery css conditional-statements

【解决方案1】：

将您的两个 jQuery 选择合并为一个，使用 if() 检查它是否为 .detailed。您还应该将这些额外的函数移到外面，以便它们每个只定义一次。

我已经为你重新安排了逻辑，现在你需要微调动画序列：http://jsfiddle.net/V93dq/2/

【讨论】：

感谢 vahapwns，我将它们合并为一个，现在可以使用了。

【解决方案2】：

@vahanpwns 是正确的，试试这个：

http://jsfiddle.net/V93dq/1/

基本上你可以使用 hasClass jQuery 方法。

$('.group').mousedown(function(){
    var $self = $(this);

    if($self.hasClass("detailed")){

    }else{

    }
});

【讨论】：

谢谢乔纳森，这与我在阅读 vahapwns 答案后所做的非常相似。
这正是 OP 所需要的，虽然我使用 .is() 而不是 .hasClass()，但你比我先到了那里：D

【解决方案3】：

看这里... 我使用了条件hassClass...我认为更好...并且我阻止了链接默认...

Finddle

function readyAnimation (mySelf) {
    mySelf.css({display : 'block'});
    mySelf.css({'-webkit-box-sizing' : 'border-box', '-moz-box-sizing' : 'border-box', 'box-sizing' : 'border-box'});
    mySelf.css({margin : '0px'});
};

function resetAnimation (mySelf) {
    mySelf.css({display : ''}); 
    mySelf.css({'-webkit-box-sizing' : '', '-moz-box-sizing' : '', 'box-sizing' : ''});
    mySelf.css({margin : ''});
};

$('.group').mousedown(function(){
    if(!$(this).hasClass("detailed")){
        var $self = $(this);
        var speed = 3250;
        var offset = {x : $self.offset().left, y : $self.offset().top};
        readyAnimation($self);
        $('.group').not($self).addClass('hide');
        $self.animate({'width' : '100%', 'height' : '+=' + '300px'}, {left: 'offset.x' + 'px', top: 'offset.y' + 'px'}, speed);
        $self.addClass('detailed');
    }else{
        var $self = $(this);
        var size = '300px';
        var speed = 3250;
        resetAnimation($self);
        $self.animate({'width' : size, 'height' : size}, speed)
        $('.group').removeClass('hide');
        $self.removeClass('detailed');
    }

}).find('a').click(function(e){e.preventDefault();});;

【讨论】：