Question

当您单击该区域以检查其是否具有＆＃34; top-nav＆＃34;时，它会工作一次，但如何使其不断检查以便每次警报都不起作用，或者有班级＆＃34; top-nav＆＃34;

jsfiddle：https://jsfiddle.net/jzhang172/117mg0y1/

＆＃13;

 if(!$('.view-projects').hasClass("top-nav")){
 alert('has');

 }else if($('.view-projects').hasClass("top-nav")){
  alert('hey');
   
 }
 
 $('.push').click(function(){
 $('.view-projects').toggleClass('top-nav');
 });

＆＃13;

.view-projects{
  height:100px;
  width:100%;
  background:black;
}
body,html{
  margin:0;
  padding:0;
}
.push{
  height:200px;
  width:100px;
  background:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-projects"></div>

<div class="push"></div>

＆＃13;

Answer 1

这应该做你想要的。希望它有所帮助！

$('.push').click(function(){
    //toggle the class 'top-nav' for element with class='view-projects'
    $('.view-projects').toggleClass('top-nav');
    //checks if our element/tag has class='top-nav'
    if($('.view-projects').hasClass("top-nav")){
        console.info("Our div has class='top-nave'");//this will print data in console in blue color instead of the old school alert
    }else{ //Else your div don't have the required class
        console.info("Our div does not have class='top-nave'"); //this will print data in console in blue color instead of the old school alert  
    }
});

Answer 2

当您点击＆＃34; .push＆＃34;时，您似乎想做两件事。元素：

切换＆＃34; .view-projects＆＃34;使用＆＃34; top-nav＆＃34;和...
警告如果＆＃34; .view-projects＆＃34;已经或没有这门课。

也就是说，没有必要经常检查间隔。由于这两种情况都取决于点击处理程序...使用点击处理程序：）

$('.push').click(function(){
    // First toggle the class
    $('.view-projects').toggleClass('top-nav');

    // Now do the alert based on what the current class is
    var hasTopNav = $('.view-projects').hasClass('top-nav'); // returns true or false
    if ( hasTopNav ) {
        alert("has");
    } else {
        alert("hey");
    }
});

Answer 3

您可以在.is()处理程序中使用".top-nav" .toggleClass()链接到click的{{1}}。请注意，遵循提问时的逻辑，"hey"会在元素确实top-nav className时收到提醒，"has"会在.view-projects没有top-nav时收到提醒className

 $(".push").click(function(){
   alert($(".view-projects").toggleClass("top-nav").is(".top-nav") ? "hey" : "has")
 });

＆＃13;

if(!$('.view-projects').hasClass("top-nav")){
 alert('has');

 }else if($('.view-projects').hasClass("top-nav")){
  alert('hey');
   
 }
 
 $(".push").click(function(){
   alert($('.view-projects').toggleClass("top-nav").is(".top-nav")? "hey" : "has");
 });

＆＃13;

.view-projects{
  height:100px;
  width:100%;
  background:black;
}
body,html{
  margin:0;
  padding:0;
}
.push{
  height:200px;
  width:100px;
  background:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-projects"></div>

<div class="push"></div>

＆＃13;

Answer 4

你可以做这样的事情

＆＃13;

 if(!$('.view-projects').hasClass("top-nav")){
 alert('has');

 }else if($('.view-projects').hasClass("top-nav")){
  alert('hey');
   
 }
 
 $('.push').click(function(){
 $('.view-projects').toggleClass('top-nav');
  if(!$('.view-projects').hasClass("top-nav")){
 alert('has');

 }else if($('.view-projects').hasClass("top-nav")){
  alert('hey');
   
 }
 });

＆＃13;

.view-projects{
  height:100px;
  width:100%;
  background:black;
}
body,html{
  margin:0;
  padding:0;
}
.push{
  height:200px;
  width:100px;
  background:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-projects"></div>

<div class="push"></div>

＆＃13;

如何不断检查班级

4 个答案: