Question

我有一个嵌套的ACF转发器：

section_container（父转发器）

section_heading（文本字段）sub_section_container（子转发器）

sub_section_heading（文本字段）food_item（子子转发器）

item_name（text）item_description（text）price（text）

所有这些都需要包含在div Section_01中，然后它将出现在第一个＆＃34;标签＆＃34;部分内容，选项卡标题取自文本字段＆＃34; section_heading＆＃34;。部分标题将是诸如Starters / Mains / Sweets / Drinks

之类的

如果用户在后端添加一行＆＃34; section_container＆＃34;这会重复以上所有内容，但这需要包含在名为Section_02的div中，以便在下一个选项卡中显示。这是通过计数器实现的 - 因为我不想要预定数量的部分/行。

目前而不是来自父转发器的所有内容＆＃34; section_container＆＃34;在单个div中显示，它将获取每个单个数组输出，然后将该内容包装在div中。

我得到的是：

final_list = ['test1', 'test2', 'test3', 'test4']

我想要的是：

<div class="section_01">
  Starter item 1  Start Price 1  Starter Description 1
</div>

<div class="section_02">
  Starter item 2  Start Price 2  Starter Description 2
</div>

Answer 1

请原谅我试图理解这个问题，是否只是你想要在每个食品项目部分而不是每个食品项目中包装div？

如果是这种情况，您可以在if的{{1}}和while语句之间添加div。

food_item

这应该给你结果：

<?php $foodItem == 1; ?>                

<?php if( have_rows('food_item') ): ?>

    <div class="section_<?php echo $foodItem; ?>">

        <?php while( have_rows('food_item') ): the_row(); ?>

            <?php the_field('item_name'); ?>
            <?php the_field('item_description'); ?>
            <?php the_field('price'); ?>

            <?php $foodItem++; ?>

        <?php endwhile; ?>

    </div>

<?php endif; ?>

如果我错过了什么，请告诉我。

Answer 2

微米。 Ferguson的说法是正确的，但是标签部分也可以进行一些清理。这是完整的清理代码。如果它不让我知道，这应该有效。

<script>
    function openSection(evt, sectionName) {
    // Declare all variables
    var i, tabcontent, tablinks;
    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(sectionName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

<div class="food-menu-container">
    <div class="menu-title"><?php the_field('menu_title'); ?> </div>
        <!--Menu Tabs-->
        <div class="food-menu-tab-container">
            <?php $tabNumber = 1;
            if( have_rows('section_container') ) :
                <div class="tab">
                while( have_rows('section_container') ): the_row();
                    $section_name = get_sub_field('section_heading');?>
                        <button class="tablinks" onclick="openSection(event, 'section_0<?php echo $tabNumber; ?>')">
                            <?php echo $section_name; ?>
                        </button>
                    <?php $counter_tab++;
                endwhile;?>
                </div>
            <?php endif;?>
        </div>
    </div>
    <div class="menu-section-container">
         <!--Food Menu-->
        <?php $foodItem = 1; ?>                
        <?php if( have_rows('food_item') ): ?>
            <div class="section_0<?php echo $foodItem; ?> section">
                <?php while( have_rows('food_item') ): the_row(); ?>
                    <!--Add styling: .section .section_inner > div {display:inline-block;}-->
                    <div class="section_inner_0<?php echo $foodItem; ?> section_inner">
                        <div class="sub_head"><?php get_sub_field('sub_section_heading');?> </div>
                        <div class="item"><?php the_field('item_name'); ?> </div>
                        <div class="price"><?php the_field('item_description'); ?> </div>
                        <div class="description"><?php the_field('price'); ?></div>
                        <?php $foodItem++; ?>
                    </div> 
                <?php endwhile; ?>
            </div>
        <?php endif; ?>
    </div>
</div>
<span class="btn" data-glf-cuid="0c1de6b2-1ca9-4202-b790-3cd5a62af2b3" data-glf-ruid="9e6118c3-d144-4511-973e-d7d7f7418e1a" ><?php the_field('order_button'); ?></span> 
<script src="https://www.fbgcdn.com/widget/js/ewm2.js" deferasync ></script>

结果HTML：

<div class="section_01">
    <div class="section_inner_01 section_inner">
        <div class="sub_head">Starter </div><div class="item">item 1 </div><div class="item_price">Start Price 1 </div><div class="description">Starter Description 1</div>
    </div>
    <div class="section_inner_01 section_inner">
        <div class="sub_head">Starter </div><div class="item">item 2 </div><div class="item_price">Start Price 2 </div><div class="description">Starter Description 2</div>
    </div>
</div>

<div class="section_02">
    <div class="section_inner_02 section_inner">
        <div class="sub_head">Starter </div><div class="item">item 1 </div><div class="item_price">Start Price 1 </div><div class="description">Starter Description 1</div>
    </div>
    <div class="section_inner_02 section_inner">
        <div class="sub_head">Starter </div><div class="item">item 2 </div><div class="item_price">Start Price 2 </div><div class="description">Starter Description 2</div>
    </div>
</div>

结果前端：

Starter item 1 Start Price 1 Starter Description 1
Starter item 2 Start Price 2 Starter Description 2

使用ACF嵌套中继器选项卡内容

2 个答案: