製品サイズ (Tシャツ) が利用可能かどうかをチェックするカスタム製品利用可能性コードを作成しました。問題は、サイズが利用できない場合でも、デフォルトで選択されたサイズが表示され、その価格 + 利用できないサイズをクリックすると利用可能なもう 1 つのサイズの価格が表示されることです。たとえば。中、小、大の3つのサイズ。中と大が利用可能であると仮定すると、小をクリックすると、価格は表示されず、利用可能なすべての価格が表示されます。極小などのサイズがさらにある場合は、その価格が表示され、残りのサイズの価格は表示されません。ただし、すべてのサイズが利用可能な場合は問題なく動作します。私が書いたコードは、誰かが私が間違っている場所を教えてくれますか?
$.fn.contentTabs = function(o){
// default options
var options = $.extend({
activeClass:'active',
addToParent:false,
autoHeight:false,
autoRotate:false,
animSpeed:400,
switchTime:3000,
effect: 'none', // "fade", "slide"
tabLinks:'a',
event:'click'
},o);
return this.each(function(){
var tabset = $(this);
var tabLinks = tabset.find(options.tabLinks);
var tabLinksParents = tabLinks.parent();
var prevActiveLink = tabLinks.eq(0), currentTab, animating;
var tabHolder;
// init tabLinks
tabLinks.each(function(){
var link = $(this);
var href = link.attr('href');
var parent = link.parent();
href = href.substr(href.lastIndexOf('#'));
// get elements
var tab = $(href);
link.data('cparent', parent);
link.data('ctab', tab);
// find tab holder
if(!tabHolder && tab.length > 0) {
tabHolder = tab.parent();
}
// show only active tab
if((options.addToParent ? parent : link).hasClass(options.activeClass)) {
prevActiveLink = link; currentTab = tab;
tab.removeClass(tabHiddenClass).width("");
contentTabsEffect[options.effect].show({tab:tab, fast:true});
} else {
contentTabsEffect[options.effect].hide({tab:tab, fast:true});
tab.width(tab.width()).addClass(tabHiddenClass);
}
// event handler
link.bind(options.event, function(e){
if(link != prevActiveLink && !animating) {
switchTab(prevActiveLink, link);
prevActiveLink = link;
}
e.preventDefault();
});
if(options.event !== 'click') {
link.bind('click', function(e){
e.preventDefault();
});
}
});
// tab switch function
function switchTab(oldLink, newLink) {
animating = true;
var oldTab = oldLink.data('ctab');
var newTab = newLink.data('ctab');
currentTab = newTab;
// refresh pagination links
(options.addToParent ? tabLinksParents : tabLinks).removeClass(options.activeClass);
(options.addToParent ? newLink.data('cparent') : newLink).addClass(options.activeClass);
// hide old tab
resizeHolder(oldTab, true);
contentTabsEffect[options.effect].hide({
speed: options.animSpeed,
tab:oldTab,
complete: function() {
// show current tab
resizeHolder(newTab.removeClass(tabHiddenClass).width(''));
contentTabsEffect[options.effect].show({
speed: options.animSpeed,
tab:newTab,
complete: function() {
oldTab.width(oldTab.width()).addClass(tabHiddenClass);
animating = false;
resizeHolder(newTab, false);
autoRotate();
}
});
}
});
}
// holder auto height
function resizeHolder(block, state) {
var curBlock = block && block.length ? block : currentTab;
if(options.autoHeight && curBlock) {
tabHolder.stop();
if(state === false) {
tabHolder.css({height:''});
} else {
var origStyles = curBlock.attr('style');
curBlock.show().css({width:curBlock.width()});
var tabHeight = curBlock.outerHeight(true);
if(!origStyles) curBlock.removeAttr('style'); else curBlock.attr('style', origStyles);
if(state === true) {
tabHolder.css({height: tabHeight});
} else {
tabHolder.animate({height: tabHeight}, {duration: options.animSpeed});
}
}
}
}
if(options.autoHeight) {
$(window).bind('resize orientationchange', function(){
resizeHolder(currentTab, false);
});
}
// autorotation handling
var rotationTimer;
function nextTab() {
var activeItem = (options.addToParent ? tabLinksParents : tabLinks).filter('.' + options.activeClass);
var activeIndex = (options.addToParent ? tabLinksParents : tabLinks).index(activeItem);
var newLink = tabLinks.eq(activeIndex < tabLinks.length - 1 ? activeIndex + 1 : 0);
prevActiveLink = tabLinks.eq(activeIndex);
switchTab(prevActiveLink, newLink);
}
function autoRotate() {
if(options.autoRotate && tabLinks.length > 1) {
clearTimeout(rotationTimer);
rotationTimer = setTimeout(nextTab, options.switchTime);
}
}
autoRotate();
});
}