javascript - jQuery 如果.hasClass，则启用.hover

Question

我有 2 个 div:.left 和 .right。

我想要的是，当 .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，所以 hover 将不再起作用......但它确实起作用了。

Answer 1

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%");
});

可以优化，但至少它可以满足您的需求。希望对您有所帮助，祝您好运!