jQuery如果.hasClass，然後啓用.hover

我有2個div：.left和.right。jQuery如果.hasClass，然後啓用.hover

我想要的是，當.active類沒有鏈接到這些div，然後啓用.hover功能。它會這樣做，如果：

if (!($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active"))) {}

但它不起作用，如果我將此條件更改爲true或false，則腳本沒有意識到它。它看起來像從頁面加載中記住這個條件的值，而不是在那之後改變。

if (!($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active"))) { 
 
     $(".left").hover(function(){ 
 
      $(".left").css("margin-left", "-10%"); 
 
      }, function(){ 
 
      $(".left").css("margin-left", "-50%"); 
 
     }); 
 
     $(".left").hover(function(){ 
 
      $(".right").css("margin-left", "90%"); 
 
      }, function(){ 
 
      $(".right").css("margin-left", "50%"); 
 
     }); 
 
     //animace praveho panelu 
 
     $(".right").hover(function(){ 
 
      $(".left").css("margin-left", "-90%"); 
 
      }, function(){ 
 
      $(".left").css("margin-left", "-50%"); 
 
     }); 
 
     $(".right").hover(function(){ 
 
      $(".right").css("margin-left", "10%"); 
 
      }, function(){ 
 
      $(".right").css("margin-left", "50%"); 
 
     }); 
 
    } 
 
    
 
    $(".left").click(function() { 
 
     $(".left").addClass("active"); 
 
     $(".right").removeClass("active"); 
 
     $(".left").css("margin-left", "-10%"); 
 
     $(".right").css("margin-left", "90%"); 
 
     
 
    }); 
 
    $(".right").click(function() { 
 
     $(".right").addClass("active"); 
 
     $(".left").removeClass("active"); 
 
     $(".left").css("margin-left", "-90%"); 
 
     $(".right").css("margin-left", "10%"); 
 
    });

body { 
 
    line-height: 1; 
 
    overflow-x: hidden; 
 
} 
 
html,body, input, textarea{ 
 
    height: 100%; 
 
} 
 

 
.container{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: aqua; 
 
    } 
 
    
 
    .half{ 
 
     display: inline; 
 
     position: absolute; 
 
     width: 100%; 
 
     height: 100%; 
 
     transition-duration: .5s; 
 
     transition-timing-function: ease-in-out; 
 
    } 
 
    
 
    .left{ 
 
     margin-left: -50%; 
 
     background-color: antiquewhite; 
 
    } 
 
    .right{ 
 
     margin-left: 50%; 
 
     background-color: cadetblue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
      <div class="half left" id="panel-left"> 
 
       
 
      </div> 
 
      <div class="half right" id="panel-right"> 
 
       
 
      </div> 
 
     </div>

目標：

哈弗的作品，當頁面加載，但一旦你點擊這些div之一，那麼

$(".right").click(function() { 
    $(".right").addClass("active"); 
});

所以在這種邏輯，.active將被添加到.right，所以懸停不會工作了...但它確實。

來源

2016-07-25 Honzis Novák

...是的？你只評估一次這種情況，爲什麼你會期望它重新評估？ –

那麼我問的是什麼，我怎麼能「24/7」重新演繹它......？ –

爲什麼不讓你的懸停功能檢查「我活躍？」當它被稱爲？ –

function clicked() { 
    var bool = ($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active")); 
    return bool; 


} 

$(".left").hover(function() { 
    if (!clicked()) ; 
    $(".left").css("margin-left", "-10%"); 
}, function() { 
    if (!clicked()) 
    $(".left").css("margin-left", "-50%"); 
}); 
$(".left").hover(function() { 
    if (!clicked()) 
    $(".right").css("margin-left", "90%"); 
}, function() { 
    if (!clicked()) 
    $(".right").css("margin-left", "50%"); 
}); 
//animace praveho panelu 
$(".right").hover(function() { 
    if (!clicked()) 
    $(".left").css("margin-left", "-90%"); 
}, function() { 
    if (!clicked()) 
    $(".left").css("margin-left", "-50%"); 
}); 
$(".right").hover(function() { 
    if (!clicked()) 
    $(".right").css("margin-left", "10%"); 
}, function() { 
    if (!clicked()) 
    $(".right").css("margin-left", "50%"); 
}); 


$(".left").click(function() { 
    $(".left").addClass("active"); 
    $(".right").removeClass("active"); 
    $(".left").css("margin-left", "-10%"); 
    $(".right").css("margin-left", "90%"); 

}); 
$(".right").click(function() { 
    $(".right").addClass("active"); 
    $(".left").removeClass("active"); 
    $(".left").css("margin-left", "-90%"); 
    $(".right").css("margin-left", "10%"); 
});

可以優化，但至少它可以做你想做的。希望有所幫助，祝你好運！

來源

2016-07-25 20:08:51

哦，天啊，謝謝！爲什麼我沒有意識到這一點...但是，再次感謝你，並給了一個美好的一天...這是我想要做的:) https://jsfiddle.net/0bLjm25b/6/ –

沒問題，很高興我可以幫忙！ –

var left = $('.left'); 
var right = $('.right'); 


function activateHoverRight() { 
// remove left hover listener 
    left.off('hover'); 
    right.hover(function() { 
    right.css("margin-left", "10%"); 
    left.css("margin-left", "-90%"); 
    }, function(){ 
    right.css("margin-left", "50%"); 
    left.css("margin-left", "-50%"); 
    }); 
} 

function activateHoverLeft() { 
    // remove right listener 
    right.off('hover'); 
    left.hover(function() { 
    left.css("margin-left", "-10%"); 
    right.css("margin-left", "90%"); 
    }, function(){ 
    left.css("margin-left", "-50%"); 
    right.css("margin-left", "50%"); 
    }); 
} 

left.click(function() { 
    activateHoverLeft(); 
    left.css("margin-left", "-10%"); 
    right.css("margin-left", "90%"); 
}); 

right.click(function() { 
    activateHoverRight(); 
    left.css("margin-left", "-90%"); 
    right.css("margin-left", "10%"); 
});

來源

2016-07-25 20:19:40 Gatsbill

jQuery如果.hasClass，然後啓用.hover

回答

相關問題