Question

我有两个单独的html文件通过jquery .load（）动态添加到index.html。在html内容完全加载后，将发生淡入动画。我想调用另一个函数 - orientationLoad（） - 取决于加载的html。但是根据我的理解，在load（）完成加载之前调用orientationLoad（）。我收到此控制台错误：

TypeError：＆＃39; undefined＆＃39;不是一个对象（评估＆＃39; $（＆＃39; .page＆＃39;）。classList.contains＆＃39;）

有人可以帮忙吗？感谢

function orientationLoad() {
  var viewportWidth = window.innerWidth;
  if (viewportWidth > 768) {
      landscapeClass();
  } else {
      portraitClass();
  }
};

function changePage(fileName){
    $('.content_wrapper').animate({opacity:0}, 500, function(){
        if (fileName == 'home.html?v=1'){
            $('.page').addClass('home');
        }else{
            $('.page').removeClass('home');
        }
        if (fileName == 'story.html?v=1'){
            $('.page').addClass('story');
        }else{
            $('.page').removeClass('story');
        }
    });
  // load html with jQuery's built-in Ajax instruction
  $('.content_loading_container').load('content/'+fileName, function(){
    $('.content_wrapper').delay(250).animate({opacity:1}, 500);
  });
  // if page is 'story' call orientationLoad()
  if ($('.page').classList.contains('story'))
    {
      orientationLoad();
    } else{}
};

$(document).ready(function(){
  $('nav a').on('touchstart', function(){
    changePage($(this).attr('data-file'));
  });
});

Answer 1

jQuery对象没有classList属性。要使用classList，必须从jquery对象中提取元素。

$('.page').get(0).classList.contains('story')

但是，您可以使用jquery的.is方法或.hasClass方法来简化此操作。

$('.page').is('.story'); // true/false
$('.page').hasClass('story'); // true/false

甚至：

$(".page.story").length; // 0/n

此外，如果您希望在.load完成后发生此条件的结果，则必须在动画行后的.load回调中移动它。

$('.content_loading_container').load('content/'+fileName, function(){
    $('.content_wrapper').delay(250).animate({opacity:1}, 500);
    if ($('.page').hasClass('story')) {
        ...
});

在.load（）和第一个函数完成后添加第二个函数

1 个答案: