2014-01-24 64 views
0

我設法減少我的jquery選項卡到當前狀態,我在變量中定義選項卡ID。jQuery實現each()函數失敗

問:如何修改此代碼以獲得更多ID?

例如:

var tabsId = '#tabs1', '#tabs2', ... ; 
var containerId = '#tabs-container1', '#tabs-container2', ... 

JS:

var containerId = '#tabs-container'; 
var tabsId = '#tabs'; 

$(document).ready(function() { 
    // Preload tab on page load 
    if ($(tabsId + ' li.current a').length > 0) { 
     loadTab($(tabsId + ' li.current a')); 
    } 

    $(tabsId + ' a').click(function() { 
     if ($(this).parent().hasClass('current')) { 
      return false; 
     } 

     $(tabsId + ' li.current').removeClass('current'); 
     $(this).parent().addClass('current'); 

     loadTab($(this)); 
     return false; 
    }); 
}); 

function loadTab(tabObj) { 
    if (!tabObj || !tabObj.length) { 
     return; 
    } 
    $(containerId).addClass('loading'); 
    $(containerId).fadeOut('fast'); 

    $(containerId).load(tabObj.attr('href'), function() { 
     $(containerId).removeClass('loading'); 
     $(containerId).fadeIn('fast'); 
    }); 
} 

HTML:

<ul class="mytabs" id="tabs"> 
    <li class="current"><a href="./tabs/tab1.php">Tab 1</a></li> 
    <li><a href="./tabs/tab2.php">Tab 2</a></li> 
    <li><a href="./tabs/tab3.php">Tab 3</a></li> 
</ul> 

<div class="mytabs-container" id="tabs-container"> 
    Loading. Please Wait... 
</div> 

編輯:

我嘗試:

我想使用jQuery each()功能。

我的例子......不工作

$(document).ready(function() { 

    var tabIds = ['1', '2', '3']; 

    $.each(tabIds, function(key, tabid) { 
     console.log(tabid); 

     var containerId = '#tabs-container'; 
     var tabsId = '#tabs'; 

     // Preload tab on page load 
     if ($(tabsId + tabid + ' li.current a').length > 0) { 
      loadTab($(tabsId + tabid + ' li.current a')); 
     } 

     $(tabsId + tabid + ' a').click(function() { 
      if ($(this).parent().hasClass('current')) { 
       return false; 
      } 

      $(tabsId + tabid + ' li.current').removeClass('current'); 
      $(this).parent().addClass('current'); 

      loadTab($(this)); 
      return false; 
     }); 

     function loadTab(tabObj) { 
      if (!tabObj || !tabObj.length) { 
       return; 
      } 
      $(containerId + tabid).addClass('loading'); 
      $(containerId + tabid).fadeOut('fast'); 

      $(containerId).load(tabObj.attr('href'), function() { 
       $(containerId + tabid).removeClass('loading'); 
       $(containerId + tabid).fadeIn('fast'); 
      }); 
     } 

    }); 

}); 

回答

1

讓他們都具有相同的類名和用途:

$(".classname").each(function(){ 
    //your code here 
}); 
+0

另外,$( 「#標籤裏」)各 – Tirno

+0

我將有更多的標籤容器,所以我需要指定哪個標籤將加載(在哪個容器中),所以我需要ID來確定。 –