2017-02-21 18 views
0

タブをクリックするたびに次のエラーが表示されます...タブはうまく動作しますが、モバイル用に使用しているので、これが原因です。とにかく、エラーを修正する必要があります。私は取得しています:コードのx.nextUntilは関数ではありません - なぜわかりません

Uncaught TypeError: x.nextUntil is not a function

節...すべて提供することができ、必要に応じて...実際にそれがあるので、ここですべてを提供します:

$(ドキュメント).ready(関数(){

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

}); 

問題の一部(と思う)

HTMLをストリップダウン
// Open accordion item if previously closed 
if (!isOpen) { 
    x.nextUntil('h6').show(); 
    x.nextUntil(accordionContent).show(); 
} 

...

<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> 

+0

'console.log(x)'はそれが何であるかを見るために! –

+0

2秒!あなたの瞬間を追加してお知らせします – James

答えて

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

は次のようになります。

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

まだtabClickのトップにvar $x = $(x);を追加するので、あなたは常に別のjqueryのインスタンスを取得していない$xの代わり$(x)を使用しています。

+0

愚かな私は、どのように気付かなかったのかわかりません!いつ私には明らかにすべきか疑問を尋ねたことに対して謝りますが、あなたの正しい方向へのあなたの点に対する多くの感謝です! – James

関連する問題