重置功能，一旦你已經點擊它

Question

嗨即時新的js和老實說，我們剛剛開始在我們學校學習js。我想要做的是一旦我已經點擊它，它將被重置，並再次刪除類。 「myClass的具有顯示無」

$(function() { 
     $("body").click(function() { 
      $(".parela").addClass('myClass'); 
     }); 
    }); 

Answer 1

你想用toggleClass（），這將打開和關閉取決於點擊的類。請注意，對於下面的演示 - 我創建了按鈕單擊按鈕來切換類。

做到這一點的另一種方式 - 因爲唯一的效果是隱藏元素 - 只是.toggle（）而不使用添加的類來切換顯示狀態。以下代碼片段顯示了這兩種方法。

$(function() { 
 
    $("#toggleButton").click(function() { 
 
    $(".parela").toggleClass('myClass'); 
 
    }); 
 
     
 
    $("#toggleButton2").click(function() { 
 
     $(".parela2").toggle(); 
 
    }); 
 
});

.myClass{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Using .toggleClass('myClass')</p> 
 
<button type="button" id="toggleButton">clickMe</button> 
 

 
<span class="parela"> Visible</span> 
 
<hr/> 
 
<p>Using just .toggle()</p> 
 
<button type="button" id="toggleButton2">clickMe</button> 
 

 
<span class="parela2"> Visible</span>

Answer 2

您可以使用toggleclass

$(function() { 
     $("body").click(function() { 
      $(".parela").toggleClass('myClass'); 
     }); 
    }); 

Answer 3

使用toggleClass，所以在每一次點擊將被添加/自動刪除

$(function() { 
    $("body").click(function() { 
     $(".parela").toggleClass('myClass'); 
    }); 
}); 

Answer 4

你可以使用一些用來控制狀態的'flag'變量。 你可以任意命名，並做出相應的決定。

$(function() { 
     var flag = false; 
     $("body").click(function() { 
      if(!flag) { 
       $(".parela").addClass('myClass'); 
       flag = true; 
      } else { 
       $(".parela").removeClass('myClass'); 
       flag = false; 
      } 
     }); 
    });