jQuery .hasClassの場合は.hoverを有効にしてください

Question

私は2つのdiv：.leftと.rightを持っています。

私が欲しいのは、.activeクラスがこれらのdivにリンクされていない場合に、.hover機能を有効にすることです。それは場合は、この処理を行います。

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

しかし、それは動作しません、私は真、または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に追加されるので、ホバーはもはや動かないでしょう...しかし、そうします。

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

最適化することはできますが、少なくともあなたが望むことはできます。希望と幸運を助けることを願っています！

Answer 2

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