Изменение семейства шрифтов в jquery - PullRequest
0 голосов
/ 09 июля 2020

Я хотел бы изменить font-family:'Pinyon Script'; в моем css на font-family:'Ariel'; через select input data-fields. Я печатаю текст на продукте в зависимости от выбора клиента. Я поискал в базе данных вопросов и попробовал разные варианты "" "для названий шрифтов, но это не помогло. Правильно ли мой сценарий?

<form>
<input data-field-id="5f0124e773aa8" />
<select data-field-id="5f012882c6562">
<option data-wapf-label="handwriting">handwriting</option>
<option data-wapf-label="typewriting">typewriting</option>
</select>
<div class="woocommerce-product-gallery--with-images"></div>
</form>
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='5f012882c6562']").change(function() {
        var font-family = $(this).find('option:selected').data('wapf-label');
        if(font-family == 'handwriting')
            font-family = 'Pinyon Script';
        if(font-family == 'typewriting')
            font-family = 'Arial';
        $(".sw_poster_text2").css("font-family", font-family);
    });  
});

Ответы [ 2 ]

1 голос
/ 09 июля 2020

Синтаксис для доступа к свойствам css описан в документации jQuery . Вам нужно обратить внимание на то, получаете ли вы доступ к font-family через атрибут javascript (в этом случае это fontFamily или через свойство (в этом случае это "font-family").

0 голосов
/ 09 июля 2020

Попробуйте изменить переменную "font-family" на "font_family". JavaScript не принимает "-" в именах переменных.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...