类切换后调用了错误的函数

Wrong function called after class toggle

本文关键字：错误 函数 调用      更新时间：2023-09-26

我正面临这样的问题。我有一个类为oldClass的div和切换div的类on click的函数。当类发生更改时，单击div应该会触发其他函数并调用alert，但这种行为不会出现，而且似乎会再次调用上一个函数。我是jQuery的新手，所以我缺少什么？

   <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script type="text/javascript">
    $(function(){
         $('.oldClass').on('click',function(){
          $(this).toggleClass('oldClass').toggleClass('newClass');
            });
    });
    $(function(){
         $('.test').on('click',function(){
             alert('1111');  
            });
    });
        </script> 
        <style>
        .oldClass {
        border: 1px solid red;
    }
    .newClass {
        border: 3px solid green;
    }
    </style>
     </head>
      <body>
      <div class="oldClass" title="qwerty">qwerty
    </div>
      <body>
      </html>

开始吧！您必须订阅和取消订阅活动。我也是jQuery的新手，它可能不是最清晰的解决方案，但它很有效。如果有人能提出更好的解决方案，欢迎您。

var subNewClass = function () {
    $('.newClass').off().on('click', function () {
        alert('1111');
    });
};
var subOldClass = function () {
    
};
$(function () {
    $('.oldClass').off().on('click', function () {
        $(this).toggleClass('oldClass').toggleClass('newClass');
        $('.newClass').off().on('click', func);
    });
});
 .oldClass {
     border: 1px solid red;
 }
 .newClass {
     border: 3px solid green;
 }
<div class="oldClass" title="qwerty">qwerty</div>

您正在声明document.ready两次。。。$(function(){});是$(document).ready();的缩写，而不是javascript函数声明。。。

要创建一个函数，您应该首先执行function foo(){ /* content goes here */ };或var foo = function(){ /* content goes here */ }; ant，然后通过编写foo(); 随时调用它

点击此处阅读更多关于JS函数的信息

检查此项以查看它应该如何工作：JSFIDDLE演示

  var alertTrigger = function (){
        $('.newClass').on('click',function(){
    $(this).toggleClass('oldClass').toggleClass('newClass');
         alert('1111');  
        });

}
$(function(){
         $('.oldClass').on('click',function(){
          $(this).toggleClass('oldClass').toggleClass('newClass');
            alertTrigger();
            });
   });
相关文章：