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