Question

我是（非常）jQuery的新手，所以请保持温和，但我似乎无法让下面的基本脚本正常工作。

加载时的直接类是.menuFlyout，当它被点击时它会根据需要进行更改，但第二部分要更改它不起作用。 noConflict（）没有帮助。

提前感谢您的帮助。

jQuery(document).ready(function() {
    jQuery('.menuFlyout').click(function(){
        jQuery('.menuFlyout').addClass('closeFlyout');
        jQuery('.menuFlyout').removeClass('menuFlyout');
    });
    jQuery('.closeFlyout').click(function(){
        jQuery('.closeFlyout').addClass('menuFlyout');
        jQuery('.closeFlyout').removeClass('closeFlyout');
    });
});

Answer 1

试试这个

jQuery(document).ready(function() {
    jQuery(document).on('click','.menuFlyout', function(){
        jQuery('.menuFlyout').addClass('closeFlyout');
        jQuery('.menuFlyout').removeClass('menuFlyout');
    });
    jQuery(document).on('click','.closeFlyout', function(){
        jQuery('.closeFlyout').addClass('menuFlyout');
        jQuery('.closeFlyout').removeClass('closeFlyout');
    });
});

您的代码存在的问题是，当您获得处理程序时，没有类closeFlyout的元素。您需要使用on方法委派点击处理程序（有关详细信息，请参阅“直接和委派事件”一节）。

使用事件委托可以解决您的问题，但作为附注，您有2个改进的代码版本（由@wirey和@h0tw1r3建议）

jQuery(document).ready(function() {
    jQuery(document).on('click','.menuFlyout', function(){
        jQuery(this).addClass('closeFlyout').removeClass('menuFlyout');
    });
    jQuery(document).on('click','.closeFlyout', function(){
        jQuery(this).addClass('menuFlyout').removeClass('closeFlyout')
    });
});

或

jQuery(document).ready(function() {
    jQuery(document).on('click','.menuFlyout, .closeFlyout', function(){
        jQuery(this).toggleClass('closeFlyout');
        jQuery(this).toggleClass('menuFlyout');
    });
});

Answer 2

检查班级名称是否拼写正确。检查萤火虫。尝试如下以查看它是否有效：

jQuery(document).ready(function() {
    jQuery('.menuFlyout').live('click',function(){
        jQuery('.menuFlyout').addClass('closeFlyout');
        jQuery('.menuFlyout').removeClass('menuFlyout');
    });
    jQuery('.closeFlyout').live('click',function(){
        jQuery('.closeFlyout').addClass('menuFlyout');
        jQuery('.closeFlyout').removeClass('closeFlyout');
    });
});

希望这有帮助，谢谢

简单的jQuery冲突

2 个答案: