javascript - 如何使1个jQuery文件具有在不同页面上使用的功能？

因此，我试图将所有功能保留在1个jQuery文件中。还在学习jQuery btw

但是我遇到了一个问题，即在另一个页面上不存在div id，它会引发错误。我使用Pop Easy modal plugin。我调用$('.modalLink').modal()初始化插件。它可以在我的主页上运行，但是会在我的“常见问题”页面上引发错误，因为没有带有modalLink类的div。

我不想创建单独的文件，那么您将如何重写呢？

$(document).ready(function () {

    // PopEasy on Home Page
    $('.modalLink').modal({
        trigger: '.modalLink',          // id or class of link or button to trigger modal
        olay:'div.overlay',             // id or class of overlay
        modals:'div.modal',             // id or class of modal
        animationEffect: 'fadeIn',      // overlay effect | slideDown or fadeIn |
        videoClass:'video',             // class of video element(s)
        close:'.closeBtn'               // id or class of close button
    });

    /*... other code for other pages go below  ....*/

    // Register Page
    $('.login-window input').on('click focusin', function() {
        this.value =  '';
    });

    // FAQ Page
    //  FAQ sidebar menu
    $('#faq-btn-general').click(function() {
        $(this).parent().addClass('faq-blue');
        $('#img-general-on').show();
        $('#img-general-off').hide();
        $('#dl-general').fadeToggle("slow", "linear");
    });

});

最佳答案

如果没有.modal()方法，那可能是因为您没有加载适当的库来支持.modal()方法。

对于行为良好的jQuery方法(我认为.modal()是)，应该没有问题:

$('.modalLink').modal();

如果.modalLink对象不存在。 $('.modalLink') jQuery对象将为空，并且在其上调用.modal()将无济于事(或者无论如何这就是jQuery方法的编写方式)。如果.modal()方法表现不佳，则可以使用以下方法自己保护它:

// makes sure the .modalLink object exists and that the `.modal()` method exists
var modalObj = $('.modalLink');
if (modalObj.length && modalObj.modal) {
    modalObj.modal(...);
}