Javascript JQuery选项卡-每个容器div的唯一ID
在我最新的Wordpress项目中，我试图找出如何将JQuery选项卡与ACF repeater字段结合使用。第一个可以工作，但是现在我想要在一个页面上包含几个选项卡的多个div。以下选项不在选项卡中显示内容（脚本不在这些选项卡上工作）。据我所知，这是由div（#tabs）的ID引起的。因此，我想在这个ID中添加一些东西，看看这是否解决了我的问题；像#tabs1、#tabs2、#tabs3等等。我不能手动给每个div它自己的ID，因为它们是在循环中创建的（ACF repeater字段）。已经搜索了几天，但似乎在脚本中找不到如何执行此操作。希望有人能指引我正确的方向Javascript JQuery选项卡-每个容器div的唯一ID,javascript,jquery,jquery-ui-tabs,uniqueidentifier,Javascript,Jquery,Jquery Ui Tabs,Uniqueidentifier,在我最新的Wordpress项目中，我试图找出如何将JQuery选项卡与ACF repeater字段结合使用。第一个可以工作，但是现在我想要在一个页面上包含几个选项卡的多个div。以下选项不在选项卡中显示内容（脚本不在这些选项卡上工作）。据我所知，这是由div（#tabs）的ID引起的。因此，我想在这个ID中添加一些东西，看看这是否解决了我的问题；像#tabs1、#tabs2、#tabs3等等。我不能手动给每个div它自己的ID，因为它们是在循环中创建的（ACF repeater字段）。已经搜索
<script>
jQuery(document).ready(function($) {
$('#tabs').tabs();
})
</script>
jQuery（文档）.ready（函数（$）{
$（“#tabs”）.tabs（）；
})
<?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; ?>
更新
换个班应该行得通，但如果不行，我建议你改变一下ACF的结构。您可以将滑块中继器包含在另一个中继器字段“tabs”中，然后您可以在循环中循环（-嵌套lops），这样您将为每个“tabs”提供一个唯一的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; ?>
我相信问题就在这里
这就是我现在的处境
我设法给所有标签包装器（#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的内容，而是关于实际的#tabs div本身。它需要一个唯一的ID，以便脚本能够在所有服务器上运行。我试图通过将代码片段放在#选项卡上来摆弄你的建议，但没有运气，所有的#选项卡现在都是#选项卡1。脚本如何知道“目标”所需的ID。将ID更改为类并没有起到作用，只是已经尝试过了，现在又尝试了一次。今天晚些时候，我们将在网上发布一个页面示例。也许这会让事情更清楚一些。这是个好主意，我会用它来创建不同的标签。但这并不能解决问题。这些内容已经有效，并且将与您的ID建议一起更好地发挥作用。它是关于包装器div的#标签。对于每一章，将制作一个新的标签，其中包含标签内容。第一个选项卡工作正常，但下面的选项卡不工作。我认为这些需要一个唯一的ID，但我可能错了。。。我想要实现的是给每个循环一个惟一的ID给选项卡包装器（#tabs），并使脚本指向这些惟一的ID。今天晚些时候将联机放置一个示例。将类添加到选项卡元素
<div class="tabs">
<?php the_sub_field('tab_title');?>
tabs<?php echo $i;?>
<?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; ?>
<?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; ?>
<?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; ?>
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();
});
});
})