javascript - addClass /removeClassを使用したjqueryon（）

Question

私はiPadで動作する必要があるこのスクリプトを持っています。ライブでクロームに取り組んでいましたが、オンにすると応答しなくなります。

どんなアイデアでも、ありがたいです！

$("#clickAll").on("click", function () {
    $(".welcome1poi").show();
    $(this).addClass("active");
});
$("#clickAll.active").on("click", function () {
    $(this).removeClass("active");
    $(".welcome1poi").hide();
});

Answer 1

これを試して

$("#clickAll").on("click", function(){
    $(".welcome1poi").toggle();
    $(this).toggleClass("active");
});

更新しました

提案されたように

$(document).on('click',"#clickAll", function(){
    $(".welcome1poi").toggle();
    $(this).toggleClass("active");
});

live（）で動作していたので、idを持つ要素がclickAll動的に追加されると思いますので、これを試してください

$(document).on("click","#clickAll", function () {
   $(".welcome1poi").show();
   $(this).addClass("active");
});
$(document).on("click","#clickAll.active", function () {
  $(this).removeClass("active");
   $(".welcome1poi").hide();
});

$(document)セレクターを要素に最も近い要素に置き換えることができます。#clickAllこれにより、より効率的になります。

Answer 2

これにより、イベントがに委任bodyされ、DOMがバブルアップしたときにキャッチされます。

$('body').on("click", "#clickAll", function(){
    $(".welcome1poi").show();
    $(this).addClass("active");
});
$('body').on("click", "#clickAll.active", function(){
    $(this).removeClass("active");
    $(".welcome1poi").hide();
});

Answer 3

トグル効果を作成するために「アクティブ」クラスを追加および削除していますか？その場合は、次のように.toggle（）を試してください。

$('#clickAll).toggle(
    function() { $('.welcome1poi').show(); }, 
    function() { $('.welcome1poi').hide(); });