javascript - x.nextUntil 不是一个函数 - 不知道为什么

标签 javascript jquery

每次单击选项卡时,我都会收到以下错误...选项卡工作正常,但在移动设备上使用它们时出现一些可用性问题,因此希望这就是原因。如果没有,无论如何都需要修复任何错误。我得到:

Uncaught TypeError: x.nextUntil is not a function

代码部分...如果需要的话可以提供所有...实际上会提供所有内容,所以这里是:

$(文档).ready(function() {

var originalTabs = $('.originalTabs').html();

function clearTabs() {
  $('.originalTabs').html(originalTabs);
}

//clearTabs();
//desktopTabs(); 

function desktopTabs() {
  clearTabs();

  // cretate tabs for desktop
  var headers = $("#tab_description h6");

  $('#tab_description h6').each(function(i) {
    $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>');
  });

  for (var i = 0; i < headers.length; i++) {
    $('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>');
  }

  $('ul.tabs').each(function() {
    var active, content, links = $(this).find('a');
    var listitem = $(this).find('li');
    active = listitem.first().addClass('active');
    content = $(active.attr('href'));
    $('.tab').hide();
    $(this).find('a').click(function(e) {
      $('.tab').hide();
      $('ul.tabs li').removeClass('active');
      content.hide();
      active = $(this);
      content = $($(this).attr('href'));
      active.parent().addClass('active');
      content.show();
      return false;
    });
  });

  headers.remove(); // remove headers from description  
  $('#tab-0').show(); // show the first tab
}

function mobileTabs() {
  clearTabs();

  //alert("loaded mobile");

  var headers = $("#tab_description h6");

  $(headers).each(function(i) {
    $(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>');
    //$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>');
    $(this).on('click', function() {
      tabClick($(this));
    });
  });

  $('#tab_description h6').first().trigger('click').addClass("active");
  $('#tab_description h6').first().nextUntil("h6").show();
}

var tabClick = function(x) {

  //alert("clicked");
  var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div');

  $('#tab_description h6').removeClass("active");
  if (!$(x).hasClass("active")) {
    $(x).addClass("active");
  }

  // Check if current accordion item is open
  var isOpen = $(x).next().is(":visible");

  // Hide all accordion items
  accordionContent.hide();

  // Open accordion item if previously closed
  if (!isOpen) {
    x.nextUntil('h6').show();
    x.nextUntil(accordionContent).show();
  }

  // Disabled to stop on mobile auto scrolling down to product description when clicking through...
  //$('html, body').animate({
  //    scrollTop: $(x).offset().top - 15
  //}, 2000);

  //return false;
}

//bind to resize
$(window).resize(function() {
  if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) {
    desktopTabs();
    $('#tab_description h6').on("click, touchstart", tabClick);

  } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) {
    mobileTabs();
    $('#tab_description h6').on("click, touchstart", tabClick);

  } else if (isDesktop) {
    desktopTabs();
  }
});

//check for the orientation event and bind accordingly
window.addEventListener("orientationchange", function() {
  if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) {
    desktopTabs();
    $('#tab_description h6').on("click, touchstart", tabClick);

  } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) {
    mobileTabs();
    $('#tab_description h6').on("click, touchstart", tabClick);

  } else if (isDesktop) {
    desktopTabs();
  }
}, false);

if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) {
  //alert("Mobile / Tablet (Portrait)");
  desktopTabs();
  $('#tab_description h6').on("click, touchstart", tabClick);

  //console.log(originalTabs);
} else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) {
  //alert("Mobile / Tablet (Portrait)");
  mobileTabs();
  $('#tab_description h6').on("click, touchstart", tabClick);

} else if (isDesktop) {
  //alert("Desktop");
  desktopTabs();
}

});

有问题的部分(我认为)

// Open accordion item if previously closed
if (!isOpen) {
  x.nextUntil('h6').show();
  x.nextUntil(accordionContent).show();
}

精简 HTML...

<div id="tab_description">
   <h6 class="active"><span>TAB 1</span><a href="#accordion_1" id="accordion_1"></a></h6>
   <p style="display: block;">TESTING CONTENT</p>
   <h6 class=""><span>TAB 2</span><a href="#accordion_2" id="accordion_2"></a></h6>
   <p style="display: none;">TESTING CONTENT</p>
   <h6 class=""><span>TAB 3</span><a href="#accordion_3" id="accordion_3"></a></h6>
   <p style="display: none;">TESTING CONTENT</p>
   <h6 class=""><span>TAB 4</span><a href="#accordion_4" id="accordion_4"></a></h6>
   <p style="display: none;">TESTING CONTENT</p>
</div>

大家有什么想法吗?

最佳答案

x.nextUntil('h6').show();
x.nextUntil(accordionContent).show();

应该是:

$(x).nextUntil('h6').show();
$(x).nextUntil(accordionContent).show();

最好将 var $x = $(x); 添加到 tabClick 顶部,并使用 $x 而不是 $(x) 所以你不会不断地获得另一个 jquery 实例。

关于javascript - x.nextUntil 不是一个函数 - 不知道为什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42379620/

相关文章:

javascript - 如何设置一个根据另一个变量而变化的变量

javascript - 使用 casperjs 更改/写入元素并在更改后捕获屏幕截图

jquery - Cors、Web Api、IE8、发布复杂数据

javascript - 不在 Mongoose 模式中的嵌套对象上的点表示法

JavaScript 如果 CSS 动画结束

javascript - 动态处理ajax结果

javascript - 在 asp.net mvc 中获取客户端机器时区

php - 维护未被 javascript escape() 函数转义的字符

jquery - 使用 jquery 选择伪元素

javascript - 如何从 Javascript 中的迭代器内部返回一个值