在 javascript 文件 Wordpress 中有条件地加载 js 部分

Question

不能 100% 确定这是可能的。我正在尝试在 Wordpress 站点的 JS 文件中加载 jQuery 的某些部分。所以我有一个 custom.js 文件来控制各种 jQuery 函数。是否可以有条件地加载文件的某些部分？

我知道您可以将完整的 js 文件加入队列。但我想在 1 个 js 文件中加载部件。

例如

jQuery(document).ready(function( $ ) {

    //LOAD THIS ON ALL PAGES
    (function($) {
      $(function() {
        $('.toggle-overlay').click(function() {
          $('aside').toggleClass('open');
          $('.header-wrapper').toggleClass('open');
          $('.button-container').toggleClass('active');
        });
      });
    })(jQuery);


    //LOAD THIS ON ALL PAGES
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            $(".header-wrapper").addClass("fixed");
        } else {
            $(".header-wrapper").removeClass("fixed");
        }
    });


    //LOAD THIS ON CONTACT PAGE ONLY
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        $('.header-single-image h1, .header-single-image h2, .header-single-image a, .header-single-image .services, .header-single-image .scroll-down-link').css({'opacity':(( 500-scroll )/500)});
    }); 


    //LOAD THIS ON ALL PAGES
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

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

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


    //LOAD THIS ON SINGLE POST PAGES ONLY
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })


    //LOAD THIS ON ABOUT PAGE ONLY
    $.each($(".cs-filter label"), function(index, value){
        var num = index + 1;
        $(value).attr("class","label"+ num);
    });

});

或者我是否需要删除我想要有条件地加载的部分并有条件地将它们加载到相关页面的页脚中？

谢谢

Answer 1

是的，您可以通过这种方式进行条件加载（假设页面的位置是“/about”）：

$(function() {
  // only execute this block if we are on the /about page
  if (window.location.pathname == '/about') {
    $.each($(".cs-filter label"), function(index, value){
    var num = index + 1;
      $(value).attr("class","label"+ num);
    });
  }
}

编辑：

如果您需要在单个 post 页面上执行块，则必须使用正则表达式。假设单个 post 页面具有 url 方案：/year/month/day/title，我们可以使用以下内容：

if (/(\d+\/){3}/.test(window.location.pathname)) {
  //LOAD THIS ON SINGLE POST PAGES ONLY
  $('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
  })
}

在 javascript 文件 Wordpress 中有条件地加载 js 部分

Conditionally loading sections of js within a javascript file Wordpress

javascript

wordpress

jquery

conditional