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

Question

我需要了解如何创建一个公式，该公式将根据显示的 div 的数量确定将什么 class 添加到 div 元素。

目前我正在使用 ACF 创建一个转发器字段，该字段将有一个子字段链接到基于管理员选择的页面。这些字段将基于 while 循环显示在它们自己的 div 中。我正在使用 Bootstrap class 等 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（这将按此顺序显示 divs：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 的数量确定使用哪个 class正在显示的元素。

Answer 1

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

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

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

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

因此，在输出时，您将 class col-md-4 分配给前 12 个元素（第 14/3 = 4 轮），然后将适当的 class 分配给其余元素（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 '; }

}

然后将 class 回显到 html 列中，其中 class 应该是 :)

另一个选项是将行宽选项添加到您的 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;

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

Create formula to add classes based on field length

php

wordpress

twitter-bootstrap

advanced-custom-fields

序列

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

Create formula to add classes based on field length

php

wordpress

twitter-bootstrap

advanced-custom-fields

序列

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