Question

不是100％确定这是可能的。我试图在Wordpress网站上的JS文件中加载jQuery的某些部分。所以我有一个custom.js文件来控制不同的jQuery函数。是否可以有条件地加载文件的某些部分？

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

e.g。

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);
    });
  }
}

编辑：

如果您需要在单个帖子页面上执行块，则必须使用正则表达式。假设单帖页面有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的部分

1 个答案: