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