簡單的jQuery衝突

我是（非常）新的jQuery，所以請溫柔，但我似乎無法得到下面的基本腳本正常工作。簡單的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'); 
    }); 
});

來源

2013-01-03 ggdx

不會觸發類會更好，這樣你就只能有一個事件處理程序？ –

另外方法鏈接：'jQuery（'。menuFlyout'）。addClass（'closeFlyout'）。removeClass（'menuFlyout'）;' – h0tw1r3

與此

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 sugggested和@ 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'); 
    }); 
});

來源

2013-01-03 15:09:39

@Daniel，我建議用父元素替換'document'來限制'on （）'。 – h0tw1r3

感謝球員，但都沒有幫助！我看到發生了什麼，或者正在嘗試發生，但是現在，班級甚至沒有爲第一次點擊而改變。'addClass（'closeFlyout'）。removeClass（'menuFlyout'）'和'.attr（'class'，'menuFlyout'）' ？ – ggdx

@Daniel：對不起，我的代碼有錯誤的錯誤。只需修復它，請再試一次。 –

檢查課程名稱是否拼寫正確。檢查螢火蟲以及。嘗試如下，看看它是否工作：

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'); 
    }); 
});

希望這有助於感謝

來源

2013-01-03 15:48:33

簡單的jQuery衝突

回答

相關問題