WordPress自定义器:检查CSS选择器的值并替换它

Question

我使用以下jquery将CSS样式注入自定义器预览窗口的</code>标记中：</div><pre><code>wp.customize( 'site_title_color', function( value ) { value.bind( function( newval ) { if ( $( '#customizer-preview .site-title' ).length > 0 ) { $( '#customizer-preview .site-title' ).remove(); } $( '#customizer-preview' ).append( '.site-title { color: ' + newval + ' ; }' ); } ); } );</code></pre><div>它工作得很好，除非之前输入的值没有被移除，而新的值只是被添加，使得CSS变得杂乱不堪。第3-5行是问题所在.基本上，我试图检查是否已经为选择器<code>.site-title</code>分配了一个值。如果存在，请清除它并用新值替换它。</div>

Answer 1

您在这里使用的是一个选择器：

       if ( $( '#customizer-preview .site-title' ).length > 0 ) {
         $( '#customizer-preview .site-title' ).remove();
       }

这就像样式化CSS属性，如果要将该规则添加到样式表中，它将为元素#customizer-preview .site-title添加样式，因此上面的代码是说如果一个元素存在于选择器#定制器-预览.站点-标题，然后删除该元素。

然后使用以下代码：

        $( '#customizer-preview' ).append( '.site-title { color: ' + newval + ' ; }' );

您正在选择前面提到的带有ID customizer-preview的样式表。然后，您要添加为selector.sit-title创建的文本字符串，并在该元素中设置一个颜色属性。

在定制预览窗口的上下文中--在您的情况下，在更新值时直接将样式应用于..site title选择器就更容易了，如下所示：

wp.customize( 'site_title_color', value => {
    value.bind( to => $( '.site-title' ).css( 'color', to ) );
} );

这样，您就不必担心在内联中应用样式时是否需要检查，并且会覆盖样式表属性，假设在保存设置时，这些属性是在PHP中创建的。当设置被多次更改时，它只会继续覆盖该内联样式。这给用户一个准确的预览，这就是定制程序的目的。如果输出与前端的输出匹配，只要两个演示文稿是相同的，对用户来说就无关紧要了。

否则，如果你真的想-是的，完全有可能做你要求的事。您将需要对样式表规则进行一些解析，您的示例代码很容易完成，但是随着您处理的内容越来越多，可能会变得更加复杂。这就是它的样子：

wp.customize( 'site_title_color', value => {
    value.bind( to => {

        // Access stylesheet.
        var css = document.getElementById( 'customizer-preview' ).sheet;

        // Loop through stylesheet's CSS rules to find index of selector.
        for ( var i = 0; i < css.cssRules.length; i++ ) {

            // Check if there's a match for your selector.
            if ( '.site-title' === css.cssRules[ i ].selectorText ) {

                // Delete the rule from the stylesheet and exit loop.   
                css.deleteRule( i );
                break;
            }
        }

        // Insert new style rule at end using the sheet's cssRules length.
        css.insertRule( '.site-title { color: ' + to + '; }', css.cssRules.length );
    } );
} );

在注释这段代码时，应该很容易理解。显然，这对您的问题很好，但是如果.site-title包含的不仅仅是一个color属性，那么您需要更新规则中的颜色属性，这样就保留了样式表的.site-title规则中设置的其他属性。