删除元素时保持备用背景颜色逻辑

时间:2016-11-04 10:03:13

标签: javascript php css

首先,我的网站是用WP作为CMS构建的,并且是用PHP编写的。我有一个由部分构建的页面。这些部分是自定义帖子类型,只有在其中包含帖子时才会显示。这些部分设置为功能,并具有不同的行和背景颜色设置。每隔一段颜色应为浅灰色和白色,以便UI看起来不错。

我的挑战是,如果客户删除其中一个cpt中的所有帖子,那么该部分将“按原样”消失,但随后它会以相同的颜色相继创建两个部分。不太好看。我刚刚在这个项目上使用javascript进行了一些模糊处理,所以我是一个完全的初学者。对我在这里做什么或者从一开始我完全走错路的任何建议?

以下是如何在页面模板上构建部分:

<?php lol_section_bg_open(); ?> 
<h2 id="countMe" class="type2" style="margin-bottom:0"><?php _e(' announcements', 'theme'); ?></h2>

<?php lol_innerSection_open(); ?>
<?php
$args = array(
    'post_type' => 'adhoc',
    'posts_per_page' => 3
);
$Query = new WP_Query( $args );
?>

<?php if ( $Query->have_posts() ) : ?>
<?php while ( $Query->have_posts() ) : $Query->the_post(); ?>
    <div class="global-margin-bottom">
        <?php get_template_part( 'parts/content', 'date' ); ?>:
        <br/>
        <span class="bold">
        <?php the_title(); ?>
        </span>
        <br/>                   
        <?php get_template_part( 'parts/content', 'readmoreButton' ); ?>                                
    </div>   
<?php endwhile; ?>      
<?php else : ?>
    <p><em><?php _e('Currently there are no announcements.', 'theme'); ?></em></p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php lol_innerSection_close(); ?>
<?php lol_section_close(); ?>
<?php

这是我的功能,我可以设置节行和bg:

function lol_section_open() {
echo '<div class="row section">';
echo '<div class="small-12 columns">';
echo '<div class="row">';
echo '<div class="small-12 large-8 large-centered columns">';
echo '<div class="row">';
echo '<div class="small-12 xxlarge-8 columns">';}

bg颜色的功能:

function lol_section_bg_open() {
echo '<div class="row section empLight">';
echo '<div class="small-12 columns">';
echo '<div class="row">';
echo '<div class="small-12 large-8 large-centered columns">';
echo '<div class="row">';
echo '<div class="small-12 xxlarge-8 columns">';}

我可能会对此感到后悔,但就我的js而言,这里是:

var x = {};

function myFunction() {
var x = document.getElementsByTagName("section").length;
document.getElementById("content").innerHTML = x;

} 

if (x % 2 == 0)
{
//my code
}
else
{
//my code
}

0 个答案:

没有答案