0

我有一个带有一些 CSS 样式的图表。它的宽度是在 WordPress 中设置的，所以我需要使用 php 来应用它。

起初，我通过在 HTML 中添加一些内联 CSS 来应用宽度。即使对于一页上的少数图表，这也很有效。但是当我想添加响应性时，内联 CSS 会覆盖媒体查询并破坏响应性。因此，我决定按照此处描述的方式将 PHP 变量直接应用于 CSS：

http://css-tricks.com/css-variables-with-php/

问题是当以下情况发生时：

我有规则：

.graph {
    width: <?php echo $graph-width; ?>;
       }

使用此类，我在一页上有 3 个图表。每个图表都有在 WordPress 管理面板中指定的不同宽度。

如何将存储在 PHP 中的不同宽度应用于页面上的所有 3 个图形。

请注意，我永远不知道一页上有多少图表。

4

1 回答 1

0

我现在没有时间对此进行测试，但这里的方法可能会奏效。让您的 div 使用另一个包含递增数字的类创建，即。容器 1、容器 2、容器 n。

然后使用 jQuery 你可以做这样的事情：

var i = 1;
function widthAdder() {
    if(i % 2 === 0) { //this is every second element
         $('.container-' + i).css(width: "100px"); //here you set the width
         i++;
    } else if (i % 3 === 0) { // this is every third
         $('.container-' + i).css(width: "150px"); //here you set the width
         i++;
    } else { //this is every first
         $('.container-' + i).css(width: "200px"); //here you set the width
         i++;
    }
}

widthAdder();

希望这可以帮助。

于 2013-08-29T16:44:10.370 回答