jquery在jsfiddle中工作，但沒有在網站

我知道人們提交了類似的問題，但我也經歷了答案，並沒有看到有效的解決方案。我寫了一個腳本，在jsfiddle中對我的投資組合項目列表進行排序。它看起來是這樣的：jquery在jsfiddle中工作，但沒有在網站

$(document).ready(function(){ 

    $(".music-button").click(function() { 
     $('.project-thumb-inside').not('.music').addClass('hidden').removeClass('visible'); 
     $('.music').addClass('visible').removeClass('hidden'); 
    }); 

)};

上的jsfiddle，劇本的作品，但是當我將其插入到我的網站的頁腳，它不會做任何事情。有人會知道爲什麼嗎？

我已經把一切（樣式表和所有）進入的jsfiddle，和我的網站的工作原理：http://jsfiddle.net/LbgPF/2/

但是，當我去我的實際網站，我的腳本不工作：http://www.rileydra.com/00_dra/work/branding-and-identity/

我已經在這方面花了不少時間，但仍然認爲解決方案很簡單，我忽略了。

編輯：改變腳本摘錄，以更好地顯示我的方式的錯誤。

來源

2013-08-22 invot

我只看到在的jsfiddle和鏈接的網站上相同的結果。 –

當你有多個函數爲不同的元素執行相同的動作時，你應該能夠使用一個普通的類來爲你的元素抽象它，下一次某些javascript無法正常工作時，請查看瀏覽器的控制檯，所有錯誤記錄在那裏，現在你越來越'Uncaught TypeError：object [object Object]的屬性'$'不是一個函數，你可以使用@ Arun的答案來修復 –

我剛剛注意到這個錯誤在firebug中。我最初只是將它作爲一個功能，但認爲這可能是導致問題的原因。現在你已經有了一些工作，它將作爲一個單一的表達式返回。 – invot

您在頁面中使用了noConflict，因此$未指向jQuery。所以不要在腳本中使用$，而需要使用jQuery。

更改腳本sort.js到

//here the shortcut version of dom ready is used, also the jQuery instance is passed as a parameter to the callback function which we assigns to a local parameter $, so we can use $ to refer jQuery inside the callback method 
jQuery(function($){ 

    $(".technology-button").click(function() { 
     $('.project-thumb-inside').not('.technology').addClass('hidden').removeClass('visible'); 
     $('.technology').addClass('visible').removeClass('hidden'); 
    }); 

    $(".retail-button").click(function() { 
     $('.project-thumb-inside').not('.retail').addClass('hidden').removeClass('visible'); 
     $('.retail').addClass('visible').removeClass('hidden'); 
    }); 

    $(".real-estate").click(function() { 
     $('.project-thumb-inside').not('.real-estate').addClass('hidden').removeClass('visible'); 
     $('.real-estate').addClass('visible').removeClass('hidden'); 
    }); 

    $(".publishing-button").click(function() { 
     $('.project-thumb-inside').not('.publishing').addClass('hidden').removeClass('visible'); 
     $('.food').addClass('visible').removeClass('hidden'); 
    }); 

    $(".music-button").click(function() { 
     $('.project-thumb-inside').not('.music').addClass('hidden').removeClass('visible'); 
     $('.music').addClass('visible').removeClass('hidden'); 
    }); 

    $(".churches-button").click(function() { 
     $('.project-thumb-inside').not('.churches').addClass('hidden').removeClass('visible'); 
     $('.churches').addClass('visible').removeClass('hidden'); 
    }); 

    $(".health-button").click(function() { 
     $('.project-thumb-inside').not('.health').addClass('hidden').removeClass('visible'); 
     $('.health').addClass('visible').removeClass('hidden'); 
    }); 

    $(".food-button").click(function() { 
     $('.project-thumb-inside').not('.food').addClass('hidden').removeClass('visible'); 
     $('.food').addClass('visible').removeClass('hidden'); 
    }); 

    $(".finance-button").click(function() { 
     $('.project-thumb-inside').not('.finance').addClass('hidden').removeClass('visible'); 
     $('.finance').addClass('visible').removeClass('hidden'); 
    }); 

    $(".entertainment-button").click(function() { 
     $('.project-thumb-inside').not('.entertainment').addClass('hidden').removeClass('visible'); 
     $('.entertainment').addClass('visible').removeClass('hidden'); 
    }); 

    $(".education-button").click(function() { 
     $('.project-thumb-inside').not('.education').addClass('hidden').removeClass('visible'); 
     $('.education').addClass('visible').removeClass('hidden'); 
    }); 

    $(".all-button").click(function() { 
     $('.project-thumb-inside').addClass('visible'); 
     $('.project-thumb-inside').removeClass('hidden'); 
    }); 

});

來源

2013-08-22 17:10:17

我現在可以吻你了。謝謝。這爲我解決了它。 – invot

jquery在jsfiddle中工作，但沒有在網站

回答

相關問題