【问题标题】:Why aren't my scripts (that are correctly linked) not working?为什么我的脚本(正确链接的)不起作用?
【发布时间】:2013-11-20 02:40:00
【问题描述】:

我的自定义 JQuery 文件以及 Masonry Jquery 已链接但无法正常工作。您可以在源文件中看到它正确链接:view-source:http://michellecantin.ca/test/features/notification-boxes/

JQuery 也已链接,我很确定它可以正常工作。

为什么我的脚本不起作用?

ps:我在 wordpress 主题中使用它。

【问题讨论】:

  • 总是在你提问之前检查 js 错误控制台
  • 另请注意,这里并不总是欢迎仅链接问题

标签: javascript jquery wordpress wordpress-theming


【解决方案1】:

您的页面中有语法错误,请查看您的浏览器控制台上显示的内容

Uncaught SyntaxError: Unexpected token }

在文件http://michellecantin.ca/test/wp-content/themes/neon_lights/js/jquery.js?ver=3.7.1

$(document).ready(function () {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();

        var target = this.hash,
            $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - 120
        }, 900, 'swing', function () {
            // window.location.hash = target;
        });
    });
});
//<-- extra }) here

$(document).ready(function () {

    var $container = $('.masonry-container');
    // $container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        isAnimated: true // <-- extra , here 
    });
    // });

});

$(document).ready(function () {

    $('.toggle-view-style1 li, .toggle-view-style2 li, .toggle-view-style3 li, .toggle-view-style4 li, .toggle-view-style5 li')
        .click(function () {
        var text = $(this).children('div.panel');
        if (text.is(':hidden')) {
            text.slideDown('200');
        } else {
            text.slideUp('200');
        }

    });
});

jQuery(document).ready(function () {
    $('.close-alert-box-style1, .close-alert-box-style2, .close-alert-box-style3, .close-alert-box-style4')
        .click(function () {
        $(this).parent().remove();
        // Although I recommend just hiding it
        // like this
        // $(this).parent().hide();
        // or fade it out
        // $(this).parent().fadeOut();
        return false;
    });
});

$(document).ready(function () {
    $('.tabs li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })

})

jQuery(document).ready(function () {
    var allPanels = jQuery('.accordion > dd').hide();
    jQuery('.accordion > dt > a').click(function () {
        allPanels.slideUp();
        if (jQuery(this).parent().next().is(':hidden')) {
            jQuery(this).parent().next().slideDown();
        }
        return false;
    });
});

$(document).ready(function () {
    $('body').fadeIn();
});

$(document).ready(function () {
    $('.tab-content').fadeIn();
});

$("img.lazy").lazyload({
    effect: "fadeIn",
    container: $("#content")
});

【讨论】:

  • 正准备发布这个。这是一个很好的例子,说明正确的缩进如何帮助您更清楚地看到错误。很好的发现!
  • 我不知道浏览器控制台存在!这将使我的生活更轻松!谢谢!
  • @MichelleCantin 也总是使用适当的缩进方案并使用适当的 IDE 进行开发,这样在编码阶段就会突出显示此类愚蠢的错误
  • @ArunPJohny 我不明白我为什么要添加一个额外的})。当我在我的代码编辑器中这样做时,它说它是一个语法错误。
  • @MichelleCantin 它可能会发生很多次......但遵循像缩进这样的简单规则可能有助于解决它
猜你喜欢
  • 2013-05-25
  • 2015-06-24
  • 2015-07-31
  • 1970-01-01
  • 2016-11-03
  • 2014-07-02
  • 2012-10-07
  • 2015-10-14
  • 1970-01-01
相关资源
最近更新 更多