CSS 内部的 Javascript 函数出现在下拉菜单中

Question

我的 Javascript 代码出现在下拉菜单中（示例 URL 位于此 post 的底部）。我以为浏览器会忽略有效的 HTML，但在这个例子中似乎并没有发生。

一些背景：我有一个 Wordpress 网站并添加了 Javascript 代码，该代码将价格变量添加到下拉菜单中的项目名称旁边。然后我尝试将一些 CSS 应用到 Javascript 输出（颜色为红色，向右浮动，填充）以便在项目名称旁边很容易看到变化价格。

代码如下：

function display_price_in_variation_option_name( $term ) {
    $product = wc_get_product();
    $id = $product->get_id();
    if ( empty( $term ) || empty( $id ) ) {
        return $term;
    }
    if ( $product->is_type( 'variable' ) ) {
        $product_variations = $product->get_available_variations();
    } else {
        return $term;
    }

    foreach($product_variations as $variation){
        if(count($variation['attributes']) > 1){
            return $term;
        }
        foreach($variation['attributes'] as $key => $slug){
            if("attribute_" == mb_substr( $key, 0, 10 )){
                $taxonomy = mb_substr( $key, 10 ) ;
                $attribute = get_term_by('slug', $slug, $taxonomy);
                if($attribute->name == $term){
                    $term .= "&nbsp;&nbsp; <span style=\"color: red; float: right; padding: 0% 7% 0% 0%;\"> &nbsp;&nbsp;" . wp_kses( wc_price($variation['display_price']), array()) . "&nbsp; </span> &nbsp;";
                }
            }
        }
    }
    
    return $term;

}

add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );

但是我的内联 CSS 代码出现在下拉菜单中。

这里有一个例子 URL 正在发生的事情：

http://66.228.41.220/product/v-neck-t-shirt/

在该页面上，单击该下拉菜单并注意出现 <span> HTML 代码。

然后我尝试将 Javascript 函数放入一个元素中，以便我可以在我的 style.css 中访问它。使用此方法：

https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style

但是我好像做不成功。我在这里错过了什么？

Answer 1

您看到的 html 代码是由于 woocommerce 将 esc_html() 应用于您的输出。它将 < 之类的东西转换为 <.

在 option 元素的 specs 中声明唯一允许的内容是：

Text, possibly with escaped characters (like é).

因此您不能在 option 元素中包含任何标签。你可以试试这个 javascript 例如：

$('#pa_color option').each(function(i, optionEl){
    var optionText = $(optionEl).text();
    var startIndex = optionText.indexOf('$');
    if(startIndex !== -1){
         var priceText = optionText.substr(startIndex);
         var restOfText = optionText.substring(0,startIndex);
         var output = restOfText + '<span style="color: #565656; float: right; padding: 0% 7% 0% 0%;">' + priceText + '</span>';
         $(optionEl).html(output);
    }
});

它的工作原理与您在开发者控制台中看到的一样，但它没有显示在页面上。浏览器只是忽略了标签...

<select>
<option><span style="color:red;">first and only option</span></option>
</select>

如果你真的需要这个功能，你应该只使用 div 编写你自己的 select 元素，或者你可以尝试找到一个像 these ones 这样适合你的插件.

CSS 内部的 Javascript 函数出现在下拉菜单中

CSS inside of a Javascript function is appearing in a dropdown menu

javascript

css

wordpress

dom

dropdown