如何在所有元素上僅觸發一次toggle（）？

Question

如何僅觸發一次切換？

我有...

<%= f.check_box :push %>
<label for="challenge_push" class="reminder-choices">Push</label>
<%= f.check_box :message %>
<label for="challenge_message" class="reminder-choices">Text</label>
<%= f.check_box :mail %>
<label for="challenge_mail" class="reminder-choices">Email</label>

<script>
  $('.reminder-choices').click(function(){
    $(".hide-remind").toggle();
  });
</script>

我試過了...

# Same behavior as above. Still toggles back and forth.
$('.reminder-choices').one("click", function(){
    $(".hide-remind").toggle();
});

換句話說，一旦單擊.reminder-choices ，則切換將起作用；否則，如果再次單擊，則將不起作用。

Answer 1

您的第二次嘗試應該可以。 您也可以這樣做。

 $('.reminder-choices').on('click.reminder', function() { $(".hide-remind").toggle(); $(this).off('click.reminder'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="reminder-choices">Click Here</div> <div class="hide-remind">Will be toggled</div> 

編輯：如果您有多個元素，並且希望在單擊其中之一后在所有元素上忽略單擊：

 $('.reminder-choices').on('click.reminder', function() { $(".hide-remind").toggle(); $('.reminder-choices').off('click.reminder'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="reminder-choices">Click Here</div> <div class="reminder-choices">Or Here</div> <div class="reminder-choices">Or Here</div> <div class="hide-remind">Will be toggled</div> 

Answer 2

將代碼包裝在容器中，然后委派事件。

 $('.container').one('click', '.reminder-choices', function() { $(".hide-remind").toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="reminder-choices">Click Here</div> <div class="reminder-choices">Or Here</div> <div class="reminder-choices">Or Here</div> </div> <div class="hide-remind">Will be toggled</div>