JQuery選項卡 - 每個容器div的唯一ID

Question

在我最新的Wordpress項目中，我試圖弄清楚如何將JQuery選項卡與ACF中繼器字段結合使用。第一個工作，但現在我想多個div在單個頁面上包含幾個標籤。以下內容不會顯示標籤中的內容（腳本不適用於這些內容）。據我瞭解這是由div的編號（#tabs）引起的。因此，我想添加一些東西給這個ID，看看這是否解決了我的問題;像＃tabs1，＃tabs2，＃tabs3等。我不能給每個div手動設置自己的ID，因爲它們是在循環中創建的（ACF中繼器字段）。一直在尋找幾天，似乎無法找到如何在腳本中做到這一點。希望有人能指引我走向正確的方向。

<script>          
    jQuery(document).ready(function($) { 
     $('#tabs').tabs(); 
    }) 
</script> 

循環創建標籤：

<?php if(have_rows('slider')): ?> 
    <div id="tabs"> 

     <?php while(have_rows('slider')): the_row(); ?> 
     <div id="<?php the_sub_field('tab_title');?>"> 
      <?php the_sub_field('tab_content');?> 
     </div> 
     <?php endwhile; ?> 

     <ul> 
     <?php while(have_rows('slider')): the_row(); ?> 
      <li><a href="#<?php the_sub_field('tab_title');?>"><?php the_sub_field('tab_title'); ?></a></li> 
     <?php endwhile; ?> 
     </ul> 

    </div> 
<?php endif; ?> 

這裏有一個網站，有一個建立一種像什麼，我想實現的一個例子......注意，每節一個帶按鈕的幻燈片放映（在我的例子中是「標籤」），用於選擇不同的幻燈片放映。 http://partnersandspade.com/studio/

Answer 1

UPDATE

更改上課應該工作，但如果沒有我建議改變你的ACF結構的位。你可以在另一箇中繼器字段「標籤」中包含滑塊中繼器，然後你就可以在循環中循環（docs - 嵌套lops），這樣你將給每個「標籤」一個唯一的ID。請參見下面的代碼：

<?php if(have_rows('tabs')): ?> 
     <?php $i = 1; while(have_rows('tabs')): the_row(); ?> 
      <div id="tabs<?php echo $i++; ?>"> 

       <?php while(have_rows('slider')): the_row(); ?> 
         <div id="<?php the_sub_field('tab_title');?>"> 
          <?php the_sub_field('tab_content');?> 
         </div> 
       <?php endwhile; ?> 

       <ul> 
         <?php while(have_rows('slider')): the_row(); ?> 
          <li><a href="#<?php the_sub_field('tab_title');?>"><?php the_sub_field('tab_title'); ?></a></li> 
         <?php endwhile; ?> 
       </ul> 

      </div> 
     <?php endwhile; ?> 
<?php endif; ?> 

我已經在第一時間誤解。您是否考慮將ID =「標籤」更改爲class =「標籤」。這應該解決的問題：

<script>          
    jQuery(document).ready(function($) { 
     $('.tabs').tabs(); 
    }) 
</script> 

標記：

<div class="tabs"> 

IGONRE下圖：

添加變量i $值爲 「1」，並增加對循環結束它的價值。

更換

<?php the_sub_field('tab_title');?> 

與

tabs<?php echo $i;?> 

總之這應該給你唯一的ID爲每行。

<?php $i = 1; while(have_rows('slider')): the_row(); ?> 
    <div id="tabs<?php echo $i;?>"> 
     <?php the_sub_field('tab_content');?> 
    </div> 
    <?php $i++; endwhile; ?> 

Answer 2

我相信問題出在這裏<div id="<?php the_sub_field('tab_title');?>">。 如果您的tab_title有空格，逗號，引號（這很可能是因爲它是一個標題而不是段塞），並且您將它用作元素id，那麼這是無效的，並且可能會導致一些問題。

改爲使用簡單的ids。 tab-1，tab-2，tab-2等，

例如，

<?php if(have_rows('slider')): ?> 
    <div id="tabs"> 

     <?php $i = 1; ?> <!-- initiate the loop count var --> 
     <?php while(have_rows('slider')): the_row(); ?> 
     <div id="#tab-<?php echo $i;?>"> 
      <?php the_sub_field('tab_content');?> 
     </div> 
     <?php $i++; ?> 
     <?php endwhile; ?> 

     <ul> 
     <?php $i = 1; ?> <!-- initiate the loop count var --> 
     <?php while(have_rows('slider')): the_row(); ?> 
      <li><a href="#tab-<?php echo $i;?>"><?php the_sub_field('tab_title'); ?></a></li> 
      <?php $i++; ?> 
     <?php endwhile; ?> 
     </ul> 

    </div> 
<?php endif; ?> 

Answer 3

這是我在哪裏，現在...

我設法讓所有的標籤封裝（#tabs）它自己的ID，這裏麪包裝的所有選項卡將獲得一個唯一的ID了。

<?php $tabsId = 1; while (have_posts()) : the_post(); ?> 
    <article id="post-<?php the_ID(); ?>" <?php post_class('cf'); ?> role="article"> 
     <header class="article-header"> 
      <h1 class="h2 entry-title"><?php the_title(); ?></h1> 
     </header> 

     <?php if(have_rows('slider')): ?> 
      <div id="tabs<?php echo $tabsId; ?>"> 

       <?php $tabId = 1; while(have_rows('slider')): the_row(); ?> 
        <div id="tab<?php echo $tabId;?>"> 
         <?php the_sub_field('tab_content');?> 
        </div> 
       <?php $tabId++; endwhile; ?> 

       <ul class="tabs"> 
        <?php $tabId = 1; while(have_rows('slider')): the_row(); ?> 
         <li><a href="#tab<?php echo $tabId;?>"><?php the_sub_field('tab_title'); ?></a></li> 
        <?php $tabId++; endwhile; ?> 
       </ul> 

      </div> 
     <?php endif; ?> 

     <section class="entry-content cf"> 
      <?php the_content(); ?> 
     </section> 

    </article> 

<?php $tabsId++; endwhile; ?> 

不過我想我需要以某種方式修改腳本，以便它知道，我不是針對#tabs格但我針對TABS1＃，＃TABS2，＃tabs3等這裏的劇本我」米使用，因爲我使用它。有沒有辦法改變它，讓它在每個#tabs .. div上運行？

jQuery(document).ready(function($) { 
    $('#tabs1').each(function(){ 
    // For each set of tabs, we want to keep track of 
    // which tab is active and it's associated content 
    var $active, $content, $links = $(this).find('a'); 

    // If the location.hash matches one of the links, use that as the active tab. 
    // If no match is found, use the first link as the initial active tab. 
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
    $active.addClass('active'); 
    $content = $($active[0].hash); 

    // Hide the remaining content 
    $links.not($active).each(function() { 
    $(this.hash).hide(); 
    }); 

    // Bind the click event handler 
    $(this).on('click', 'a', function(e){ 
    // Make the old tab inactive. 
    $active.removeClass('active'); 
    $content.hide(); 

    // Update the variables with the new link and content 
    $active = $(this); 
    $content = $(this.hash); 

    // Make the tab active. 
    $active.addClass('active'); 
    $content.show(); 

    // Prevent the anchor's default click action 
    e.preventDefault(); 
    }); 
}); 
})