Question

我知道人们已经提交了类似的问题，但我也一直在回答这些问题并且没有看到有效的解决方案。我写了一个脚本，在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/

我花了很多时间在这上面，但仍然认为解决方案很简单，我忽略了。

编辑：更改了脚本摘录，以便更好地显示我的方式错误。

Answer 1

您在页面中使用了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');
    });

});

jquery在jsfiddle工作，但不在现场

1 个答案: