PHP 修改获取的变量和 return 到 JS 的前端

Question

我正在从 Woocommerce 获取产品属性，并将它们作为变量在脚本标签中回显，以便在前端与 javascript 一起使用。这可能是一种不好的做法，请随时赐教。

示例：

产品属性：

总高度：43m

总长度：55m

PHP 查询“Total-height”作为属性名称，“43m”作为属性值。 PHP 将空 space 替换为“-”。我无法在变量名称中定义带有“-”的 javascript 变量。示例：var Total-height = "43m";

我该如何解决这个问题？这是我的代码。提前致谢。

function product_attribute_dimensions(){
    global $product;
    
foreach ($product->get_attributes() as $taxonomy => $attribute_obj ) {
    // Get the attribute label
    $attribute_label_name = wc_attribute_label($taxonomy);
    $value = $product->get_attribute($taxonomy);
        if ($value) {
            $label = get_taxonomy($taxonomy)->labels->singular_name;
    
            $profile_one = $value;
            echo '<script>' . $attribute_label_name . ' = "' . $value . '";
            </script>';
                
        }

}

Answer 1

据我了解变量“$attribute_label_name”中生成的字符串有问题吗？看看https://www.php.net/manual/de/function.str-replace.php

使用这个原生 PHP 函数，您可以搜索一个字符（例如，“-”）并替换为其他字符（例如，“_”） echo '<script>' . str_replace("-", "_", $attribute_label_name) . ' = "' . $value . '";

但是正如您所说，这可能不是最好的方法。我个人会将此类信息添加到某些 HTML 元素的“data-X”HTML 属性中，并将其提取到我的 JS 中。类似这样：

<div id="some_element" class="could be hidden" data-total-height="<?= $value ?>"></div>

您可以使用 jQuery $("#some_element").attr("data-total-height")

查询类似的内容

Answer 2

尝试使用 window["variable_name"] 这样做：

echo '<script>window["' . $attrname . '"]=' . $attrval

然后在你的 js 中：

let this_var = window[attrname]

这似乎是最清晰的最短路径。

Answer 3

function product_attribute_dimensions() {
    global $product;

    $product_atrributes = array();
    foreach ($product->get_attributes() as $taxonomy => $attribute_obj) {
        // Get the attribute label
        $attribute_label_name = wc_attribute_label($taxonomy);
        $attribute_label_name = str_replace(' ', '_', $attribute_label_name);
        $value = $product->get_attribute($taxonomy);
        if ($value) {
            $product_atrributes[$attribute_label_name] = $value;
        }
    }
    echo '<script type="text/javascript">var product_atrributes = ' . json_encode($product_atrributes) . ';</script>';
}

现在你可以在 JS 中使用 product_atrributes.Total_height.value 这样也可以避免多余的脚本标签。

PHP 修改获取的变量和 return 到 JS 的前端

PHP modify fetched variable and return to frontend for JS

javascript

php

woocommerce

attributes

product