0

我是一项功能，它允许用户更改 div 内的字体字体系列，并且它很有效。我将尝试解释问题所在，希望您能理解。

用户点击字体并选择“Arial Black” 点击div，字体改变。用户点击“Times New Roman”点击div，字体发生变化。用户点击 google 字体“Lato” 点击 div，字体发生变化。用户单击字体“Arial Black”单击 div，没有任何反应（我做了 console.log，此时 font 和 font2 都未定义）。只有当用户选择“Arial”并单击 div 时，它才会再次开始工作。

var originalFont = $('#fonts1').data('font');
            var originalgFont = $('#googlefonts1').data('font');
            var originalsFont = $('#fontsizes1').data('fontsize');
            var originalColor = $('#colorChoice').css('background', 'white');
            var textColor =$('#textColor').css('color', 'black');
            var font;
            $("#fonts1").on("change", function() {
                font = $(this).val();
            });
            $("#content-link2").on("click", "*", function() {
                $(this).css('font-family', font);
                console.log(font);
                font = originalFont;
            });
            var font2;
            $("#googlefonts1").on("change", function() {
                font2 = $(this).val();
            });
            $("#content-link2").on("click", "*", function() {
                $(this).css('font-family', font2);
                console.log(font2);
                font2 = originalgFont;
            });


<button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin hide_all">Load Fonts</button>
        <button style="display: none" class="btn btn-primary form-control margin hide_all" id="fontsHide">Hide Fonts</button>
        <select title="Choose a font and then click on any box" style="display: none" id="fonts1" class="form-control margin hide_all"></select>

        <button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin hide_all">Google fonts</button>
        <button style="display: none" class="btn btn-primary form-control margin hide_all" id="googleHide">Hide Google</button>
        <select title="Choose a font and then click on any box" style="display: none" id="googlefonts1" class="form-control margin hide_all"></select>
4

0 回答 0