php - 如何将存储在 PHP 中的不同宽度应用于 3 个相同的 DIV(使用相同的 CSS)

Question

我有一个具有一些 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 个图形。

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

Answer 1

我现在没有时间对此进行测试，但这里的方法可能会奏效。使用另一个包含递增数字的类创建您的 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();

希望这对您有所帮助。