Question

有没有办法合并这些脚本或提高代码效率？我是jquery的新手，我想我生成的代码太多了。是否有可能对其进行优化？

<script>
    jQuery(".myClass1").hover(
        function () {
            jQuery(".myClass1 h3").addClass("addedClass1");
        },
        function () {
            jQuery(".myClass1 h3").removeClass("addedClass1");
       }
    );
</script>


<script>
    jQuery(".myClass1").hover(
        function () {
            jQuery(".myClass1 h3").addClass("addedClass2");
        },
        function () {
            jQuery(".myClass1 h3").removeClass("addedClass2");
       }
    );
</script>

是否可以优化这些：

<script>
    jQuery(".myClass1").hover(
        function () {
            jQuery(".myClass1 h3").addClass("addedClass");
        },
        function () {
            jQuery(".myClass1 h3").removeClass("addedClass");
       }
    );
</script>


<script>
    jQuery(".myClass2").hover(
        function () {
            jQuery(".myClass2 h3").addClass("addedClass");
        },
        function () {
            jQuery(".myClass2 h3").removeClass("addedClass");
       }
    );
</script>

Answer 1

尝试组合您的选择器，利用this对象，并使用toggleClass方法传递单个处理函数，如下所示：

jQuery(".myClass1, .myClass2").hover(
    function () {
        jQuery(this).find("h3").toggleClass("addedClass");
   }
);

首先，通过将您的选择器".myClass1, myClass2"与它们之间的逗号组合，您可以将单个hover事件链接到这两个类的所有元素。

其次，通过使用处理函数的this对象，您可以引用触发悬停事件的当前元素，而无需知道其特定的类。

最后，通过传递单个处理程序函数并使用toggleClass方法，您执行两个处理程序函数所服务的相同操作，并对addClass和removeClass进行两次单独调用。

将多个jQuery脚本合并为更高效的代码

1 个答案: