如何动态更改div的背景颜色(取决于WooCommerce中的订单状态)?

时间:2020-09-07 作者:Chrizzly

我试着给出三个div,有三种不同的颜色和短语(每个订单状态分别为:已完成(绿色)、待处理(红色)、正在处理(橙色)。

<div class="order-actions2">
<?php
    $order_status = $order->get_status();
    if($order_status=="completed") {
        echo "Thank you for the payment" . \' \';
        $actions = wc_get_account_orders_actions( $order );
        ?> <style type=text/css>.order-actions2 {background-color: green;} </style><?php
    }
    elseif($order_status=="pending") {
        echo "Spending money is always a statement" . \' \';
        $actions = wc_get_account_orders_actions( $order );
        ?> <style type=text/css>.order-actions2 {background-color: red;} </style><?php
    }
    elseif($order_status=="processing") {
        echo "Spending money is always a statement" . \' \';
        $actions = wc_get_account_orders_actions( $order );
        ?> <style type=text/css>.order-actions2 {background-color: orange;} </style><?php
    }
    
    if ( ! empty( $actions ) ) {
        foreach ( $actions as $key => $action ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
            echo \'<a href="\' . esc_url( $action[\'url\'] ) . \'" class="order-action2-button \' . sanitize_html_class( $key ) . \'">\' . esc_html( $action[\'name\'] ) . \' \' . \'now\' . \'</a>\';
        }
    }
    ?>
</div>
目前,每个div都显示为绿色。如果我将每个状态包装在自己的div中,那么我需要一直打开和关闭php。这使我无法使用elseif。也许有一个关于数组或其他我不知道的解决方案?非常感谢。

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

您的问题是对CSS/HTML工作原理的误解。

举个例子:

<style>p { color: red; }</style>
<p>1</p>
<style>p { color: blue; }</style>
<p>2</p>
<style>p { color: green; }</style>
<p>3</p>

Which colour is the 1st paragraph?

我怀疑你会回答红色,但那是不正确的。所有段落均为绿色。

断开的是p { color: green; } 并不意味着;从这里开始,段落为绿色“,它的意思是;all 页面上的段落为绿色“。

更糟糕的是,这些是内联样式标记,这是非常糟糕的做法,完全没有必要。

因此,只需添加一个提及订单状态的HTML类,并将规则放入CSS文件中即可更改颜色,例如:。

<div class="order-actions2 order-status--complete">
.order-status--complete {
    background-color: green;
}
在PHP中,可以执行以下操作:

<div class="order-actions2 order-status--<?php echo esc_attr( $order->status ); ?>">
这将完全从PHP中删除代码的样式部分,大大简化了事情,并使其更易于使用。

记住,CSS规则在整个页面上全局应用。.order-actions2 { ... }all具有order-actions2 作为一个HTML类,无论它们在页面上的位置如何。

您可能还想使用style="" 属性,这也是非常非常糟糕的做法。忽略任何建议此解决方案的人。

一些额外注意事项:

$actions = .. 行在每种情况下都是相同的,只需将它移到末尾,并在if检查之前调用它一次,没有理由附加 . \' \' 只需在第一个字符串中添加空格sanitize_html_class 不能替代esc_attr. 我们在这里逃跑,没有消毒,所以它还得包起来esc_attr

相关推荐

如何在WordPress中用AJAX请求更改PHP变量

我有一个带有选择框的html表单,我想根据用户的选择显示不同的数据。我真正需要做的就是根据选择在php中更改1个变量。我进行了一个外部API调用,返回数据并将其显示在html表中。我想根据用户的选择更改api调用的一小部分(get uri中的id)。有没有简单的方法可以做到这一点?我已经完成了jquery并使用wordpress将其排队,当更改select box值时,我得到了200个响应。但我似乎无法更改PHP。为了避免代码轰炸,我修改了回调函数,以给出一个我希望发生的示例。非常感谢您的反馈。谢谢HTM