为什么我不能做这两个jquery函数

Question

我喜欢在jQuery中尝试这个但它不会工作..两个点击功能分开工作但不在一起..为什么这个以及如何解决这个问题？

$("p").click(function(){
  $(this).addClass("test"); 
});

$(".test").click(function(){
  $(this).removeClass("test");
})

有人可以对此有所了解吗？

Answer 1

Example of Current Implementation

<强> HTML

<p>Dit is een jq test</p>

<div class="test">Dit is een jq test</div>

这将允许您的事件触发，因为事件绑定上的元素上存在类。

Example to Accomplish the intend Goal

<强> JS

$("p").click(function(){
  $(this).toggleClass("test"); 
});

Answer 2

您的代码无效，因为

$(".test").click();

这部分脚本在第一次加载页面时运行并绑定具有测试类的那些元素的click事件（最初没有这样的元素，我们在点击＆＃39; p＆＃39;时动态添加测试类）

function(){$(this).removeClass("test");}

这部分脚本每次都会在页面加载上有测试类的元素的click事件上运行（最初没有这样的元素存在，所以这段代码不会被调用）。

此代码将帮助您了解执行流程：

 $("p").on('click',function(){
            if($(this).hasClass("test"))
                $(".test").removeClass("test");
            else
                $(this).addClass("test");
        }); 

解决问题的最佳方法：

$("p").on('click',function(){
            $(this).toggleClass("test");
        }); 

Answer 3

你需要在关闭＆＃39; body＆＃39;之前将它放在页面的末尾。标记：

<script  type="text/javascript">
    $(document).ready(function(){
       $("p").on('click',function(){
         $(this).addClass("test"); 
       });

       $(".test").on('click',function(){
          $(this).removeClass("test");
       })
    })
</script>

注意：我稍微更改了您的代码，使用了＆＃39; on＆＃39;事件