创建公式以根据字段长度添加类

Question

我需要一些关于如何创建公式的见解，该公式将根据显示的 div 的数量确定要添加到 div 元素的类。

目前我正在使用 ACF 创建一个转发器字段，该字段将有一个子字段链接到基于管理员选择的页面。这些字段将根据 while 循环显示在它们自己的 div 中。我正在使用 Bootstrap 类，例如 col-sm-12、col-sm-6 和 col-sm-4。

while( have_rows( 'project_repeater' ) ): the_row();

    $post_object = get_sub_field( 'project_type' );

    $count = count( get_field('project_repeater') ); // Output 4

    $mod = $count % 3; // Output 1

    if( $post_object ):

        $post = $post_object;
        setup_postdata( $post );

        $classname = '';

        if( $mod == 1 ) {

            if( $count == 1 ) {
                $classname .= 'col-sm-12';
            } elseif( $count == 4 ) {
                $classname .= 'col-sm-6';
            } else { // $count == 7
                $classname .= 'col-sm-4';
            }

        } elseif( $mod == 2 ) {

            if( $count == 2 ) {
                $classname .= 'col-sm-6';
            } elseif( $count == 5 ) {
                // $classname .= 'col-sm-12';
            } else { // $count == 8
                // $classname .= 'col-sm-4';
            }

        } else { // $mod == 0
            $classname .= 'col-sm-4';
        }

        ?>
        <div class="project-cat <?php echo $classname; ?>">
            <a href="<?php the_permalink( $post ); ?>">
                <h5><?php the_title(); ?></h5>
                <p><?php the_excerpt(); ?></p>
            </a>
        </div>
        <?php

        wp_reset_postdata();
    endif;

endwhile;

现在当 $count == 5 时，我需要将前 3 个 div 设置为 col-sm-4，然后将最后 2 个 div 设置为 col-sm-6（这将按此顺序显示 div 堆叠在彼此之上： 3,2)。

$count == 7 时，需要与 $count == 5 时类似，但前 3 个为 col-sm-4，后 4 个为 col-sm-6 (3,2,2)

$count == 8 时，前 6 个为 col-sm-4，后 2 个为 col-sm-6 (3,3,2)，情况会略有不同。

不是在 if 语句之后使用 if 语句，而是必须有一种更好的方法来创建一个公式，该公式将根据正在显示的 div 元素的数量来确定要使用的类。

Answer 1

这是更多的数学和逻辑问题，而不是编码问题。

你为什么不 1. 获取元素的数量。

除以 3 并将结果取底。这样您就可以知道您将拥有多少行 col-xx-4。

假设您总共有 14 件商品。比拳头 12 元素应该有 col-md-4。 如果你舍入 14/3 = 4 剩下的是 14 - (3*4) = 2 所以如果剩下的是 1 比你可以使用 col-md-12 类，如果是 2 比 col-md-6。

所以在输出时您将类 col-md-4 分配给前 12 个元素（第 14/3 轮 = 4），然后根据它们的数量为剩余的元素（14 - (3*4) = 2）分配适当的类(1 或 2)

你认为它对你有用吗？

序列

设置一些变量

$total = 项目总数。您可以简单地使用计数器运行循环。

$md4-limit = floor($total/3)*3;
$remaining = $total - $md4-limit;

然后当您运行循环时，使用 $i 并为每个元素增加该值并在输出检查时

if ($i <= $md4-limit) {
$class = ' col-md-4 ';
} else {
 if($remaining == 1) { $class = ' col-md-12 '; }
 if($remaining == 2) { $class = ' col-md-6 '; }

}

然后将类回显到该类所在的列 html 中:)

另一个选项是向您的 ACF 转发器字段添加行宽选项，然后在后端构建网格。

Answer 2

感谢尼克，你帮了我很多，我确实发现了我做错了什么以及为什么它没有像你说的那样显示。我没有正确定义$i。但这是代码，一切正常！再次感谢你，尼克！

$count = count( get_field('project_repeater') );

$limit = floor( $count / 3 ) * 3;

$remaining = $count - $limit;

$i = 0;

while( have_rows( 'project_repeater' ) ): the_row();

    $post_object = get_sub_field( 'project_type' );

    if( $i < $limit ) {
        $classname = 'col-sm-4';
    } else {
        if( $remaining == 1 ) {
            $classname = 'col-sm-12';
        }
        if( $remaining == 2 ) {
            $classname = 'col-sm-6';
        }
    }

    if( $post_object ):

        $post = $post_object;
        setup_postdata( $post );

        ?>
        <div class="project-cat <?php echo $classname; ?>">
            <a href="<?php the_permalink( $post ); ?>">
                <h5><?php the_title(); ?></h5>
                <p><?php the_excerpt(); ?></p>
            </a>
        </div>
        <?php

        wp_reset_postdata();
    endif;

    $i++;

endwhile;