Question

我正在使用PHP脚本从API提取数据并在Wordpress网站中生成HTML div。我想为页面上正在生成的行生成备用的“斑马”底纹，但由于无法向行添加类等，因此我很想办法做到这一点。有什么建议吗？

这是PHP代码：-

<?php $schedules = get_schedule_list_upcoming();?>
<?php foreach($schedules->Schedule as $schedule){ ?>
        <div class="et_pb_row et_pb_row et_pb_row_4col">
            <div class="et_pb_column et_pb_column_1_4 et_pb_column et_pb_css_mix_blend_mode_passthrough">
                <div class="et_pb_module et_pb_text et_pb_text et_pb_bg_layout_light  et_pb_text_align_left">
                    <div class="et_pb_text_inner">
                        <p>
                            <?php echo $schedule->CourseName; ?>
                        </p>
                    </div>
                </div>
            </div>
            <div class="et_pb_column et_pb_column_1_4 et_pb_column et_pb_css_mix_blend_mode_passthrough">
                <div class="et_pb_module et_pb_text et_pb_text et_pb_bg_layout_light  et_pb_text_align_left">
                    <div class="et_pb_text_inner">
                        <p>
                            <?php echo $schedule->StartDate; ?>
                        </p>
                    </div>
                </div>
            </div>
            <div class="et_pb_column et_pb_column_1_4 et_pb_column et_pb_css_mix_blend_mode_passthrough">
                <div class="et_pb_module et_pb_text et_pb_text et_pb_bg_layout_light  et_pb_text_align_left">
                    <div class="et_pb_text_inner">
                        <p>
                            <?php echo $schedule->CourseLocation; ?>
                        </p>
                    </div>
                </div>
            </div>
            <div class="et_pb_column et_pb_column_1_4 et_pb_column et_pb_css_mix_blend_mode_passthrough">
                <div class="et_pb_module et_pb_text et_pb_text et_pb_bg_layout_light  et_pb_text_align_left">
                    <div class="et_pb_text_inner">
                        <p>
                        <?php if (($schedule->PlacesLeft) > 0){ ?>
                            <a class="booking" href="<?php echo $schedule->LinkToBookingPage; ?>">Book</a>
                        <?php } else {?>
                            Fully Booked
                        <?php } ?>  
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <?php } ?>
    </div>
    ?>

这是脚本生成的一行的HTML。生成的每一行都是相同的，除了段落标记中的数据：-

<div class="et_pb_row et_pb_row et_pb_row_4col">
<div class="et_pb_column et_pb_column_1_4 et_pb_column et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_text et_pb_text et_pb_bg_layout_light  et_pb_text_align_left">
<div class="et_pb_text_inner">
<p> JAUPT CRS9179 - Driver Hours and Highway Code</p>
</div>
</div>
</div>
<div class="et_pb_column et_pb_column_1_4 et_pb_column et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_text et_pb_text et_pb_bg_layout_light  et_pb_text_align_left">
<div class="et_pb_text_inner">
<p> 19/10/2018</p>
</div>
</div>
</div>
<div class="et_pb_column et_pb_column_1_4 et_pb_column et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_text et_pb_text et_pb_bg_layout_light  et_pb_text_align_left">
<div class="et_pb_text_inner">
<p>Blackridge</p>
</div>
</div>
</div>
<div class="et_pb_column et_pb_column_1_4 et_pb_column et_pb_css_mix_blend_mode_passthrough">
<div class="et_pb_module et_pb_text et_pb_text et_pb_bg_layout_light  et_pb_text_align_left">
<div class="et_pb_text_inner">
<p> <a class="booking" href="/RegisteredGuest/BookingItems.aspx?SchedRef=TS6445992">
Book</a></p>
</div>
</div>
</div>
</div>

Answer 1

我相信您正在寻找nth-child CSS选择器。这应该为您工作：

.et_pb_row:nth-child(odd){
    background:#fff;
}
.et_pb_row:nth-child(even){
    background:#ccc;
}

Answer 2

如果可能，请首先考虑不要重复。

之间的唯一区别：

<div class="et_pb_column et_pb_column_1_4 et_pb_column et_pb_css_mix_blend_mode_passthrough">
            <div class="et_pb_module et_pb_text et_pb_text et_pb_bg_layout_light  et_pb_text_align_left">
                <div class="et_pb_text_inner">
                    <p>
                        <?php echo $schedule->CourseName; ?>
                    </p>
                </div>
            </div>
        </div>

和

<div class="et_pb_column et_pb_column_1_4 et_pb_column et_pb_css_mix_blend_mode_passthrough">
            <div class="et_pb_module et_pb_text et_pb_text et_pb_bg_layout_light  et_pb_text_align_left">
                <div class="et_pb_text_inner">
                    <p>
                        <?php echo $schedule->StartDate; ?>
                    </p>
                </div>
            </div>
        </div>

事实是您正在更改内部回声。看一下创建一个可以执行此操作的快速函数，然后继续使用段落文本调用该函数。这样，您可以轻松更改内容，同时保持格式一致。

关于斑马问题，您可以将行包装在一个节中，然后使用.et_pb_row et_pb_row et_pb_row_4col的CSS定位该节中的任何内容：

如果只能编辑HTML代码，则可以尝试在函数调用之前添加布尔值之类的方法，然后使用if / else回显该行的正确颜色。

所以想

<div class="et_pb_row et_pb_row et_pb_row_4col" <?= $white ? "style=background-color: white" : "style=background-color:black" >

，然后在最后翻转布尔值。最好的方法仍然是将if / else添加到类echo中，并将该类black / white添加到css文件中。

PHP生成HTML <div>的备用Backround底纹

2 个答案: