Question

我希望以下脚本接受另一种语言的值颜色。如何更改脚本以接受“ 5f01264e722ae”的字段值，并将其更改为关联的预定CSS值？即输入值为midnightblue，并将其更改为css值蓝色。

谢谢您的帮助。

<script>
    jQuery(document).ready(function($) {
    
    var fieldId = "5f0124e773aa8"; 
    var defaultText = "my name"; 
    
    if(!jQuery('input[data-field-id="'+fieldId+'"]').length)
        return;
        
    var $el = jQuery('<div class="sw_poster_text2">').html(defaultText);
    $el.appendTo(jQuery('.woocommerce-product-gallery--with-images'));
    
    jQuery(document).on('change keyup','input[data-field-id="'+fieldId+'"]',function(){
        var v = jQuery(this).val() || defaultText;
        jQuery('.sw_poster_text2').html(v);
        
    }).trigger('change');
    $("select[data-field-id='5f01264e722ae']").change(function() {
        var color = $(this).find('option:selected').data('wapf-label')
        $(".sw_poster_text2").css("color", color);
    });  
});
</script>

Answer 1

像这样的颜色

jQuery(document).ready(function($) {
    
    var fieldId = "5f0124e773aa8"; 
    var defaultText = "my name"; 
    
    if(!jQuery('input[data-field-id="'+fieldId+'"]').length)
        return;
        
    var $el = jQuery('<div class="sw_poster_text2">').html(defaultText);
    $el.appendTo(jQuery('.woocommerce-product-gallery--with-images'));
    
    jQuery(document).on('change keyup','input[data-field-id="'+fieldId+'"]',function(){
        var v = jQuery(this).val() || defaultText;
        jQuery('.sw_poster_text2').html(v);
        
    }).trigger('change');
    $("select[data-field-id='5f01264e722ae']").change(function() {
        var color = $(this).find('option:selected').data('wapf-label');
        if(color == 'midnightblue')
            color = 'blue';
        $(".sw_poster_text2").css("color", color);
    });  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input data-field-id="5f0124e773aa8" />
<select data-field-id="5f01264e722ae">
<option data-wapf-label="black">Black</option>
<option data-wapf-label="red">Red</option>
<option data-wapf-label="yellow">Yellow</option>
<option data-wapf-label="midnightblue">Midnight Blue</option>
</select>
<div class="woocommerce-product-gallery--with-images"></div>
</form>

jQuery添加对不同值名称的支持

1 个答案: