Question

我有2个下拉框，其中一个有标准字体和其他谷歌字体，两者都有效，但如果我从标准字体中选择字体我不能用谷歌字体替换它，我需要重新加载页面由于某种原因。这是相同的其他方式，所以如果我选择谷歌字体，我可以改变字体，但只能从谷歌字体下拉菜单而不是标准字体。

所以基本上我希望能够从标准字体中选择一种字体，但也能用谷歌字体中的字体替换该字体。

这是我的HTML：

       </div>
        <div class="features form-group">
            <input class="filestyle form-control margin"  data-input="false" type="file" data-buttonText="Upload Logo"
            data-size="sm" data-badge="false" onchange="readURL(this);" />
            <!--<button onClick=" updateDatabase(this);"</button>-->
            <button style="display: none" class="form-control margin btn btn-primary" id="showColor">Show Colors</button>
            <button style="display: none" class="form-control margin btn btn-primary" id="hideColor">Hide Colors</button>
            <input style="display: none" class="btn btn-default form-control margin" type="color" id="colorChoice">
            <a style="display: none" href="#" class="btn btn-default form-control margin" id="cp4">Background</a>
            <button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin">Load Fonts</button>
            <button style="display: none" class="btn btn-primary form-control margin" id="fontsHide">Hide Fonts</button>
            <select style="display: none" data-font="Arial" id="fonts1" class="form-control margin"></select>
            <button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin">Google fonts</button>
            <button style="display: none" class="btn btn-primary form-control margin" id="googleHide">Hide Google</button>
            <select style="display: none" id="googlefonts1" class="form-control margin"></select>
            <button style="display: none" class="form-control margin btn btn-default" id="finishEdit">Done</button>
            <button class="form-control margin btn btn-default" id="startEdit">Edit</button>
        </div>
<div id="content-link2"><html>
<head>
    <title>Template 1</title>
        <link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="logo">
        <img class="images" id="image" src="#" alt="Your Logo"/>
    </div>
<div  contenteditable="true" id="content" class="draggable ui-widget-content refresh"><p>Change Text inside this box</p></div>

<div id ="editTxt" class="refresh" contenteditable="true">
<p>This text can be by the user.</p>
</div>
</body>
</html></div>

我的JS：

$( "#showColor" ).click(function() {
    $( "#colorChoice" ).show( "slow" );
    $( "#cp4" ).show( "slow" );
    $( "#hideColor" ).show( "slow" );
    $( "#showColor" ).hide( "slow" );
});
$( "#hideColor" ).click(function() {
  $( "#hideColor" ).hide( 1000 );
    $( "#colorChoice" ).hide( "slow" );
    $( "#cp4" ).hide( "slow" );
    $( "#showColor" ).show( "slow" );
});
$( "#fontsShow" ).click(function() {
    $( "#fonts1" ).show( "slow" );
    $( "#googleShow").show( "slow" );
    $( "#fontsHide" ).show( "slow" );
    $( "#fontsShow" ).hide( "slow" );
});
$( "#googleShow" ).click(function() {
    $( "#googlefonts1" ).show( "slow" );
    $( "#googleHide" ).show( "slow" );
    $( "#googleShow" ).hide( "slow" );
});
$( "#googleHide" ).click(function() {
    $( "#googleHide" ).hide( "slow" );
    $( "#googleShow" ).show( "slow" );
    $( "#googlefonts1" ).hide( "slow" );
});
$( "#fontsHide" ).click(function() {
    $( "#fonts1" ).hide( "slow" );
    $( "#googleShow").hide( "slow" );
    $( "#googlefonts1").hide( "slow" );
    $( "#fontsShow" ).show( "slow" );
    $( "#fontsHide" ).hide( "slow" );
});
$(function() {
        $('#cp4').colorpicker().on('changeColor', function(e) {
            $('#content-link2')[0].style.backgroundColor = e.color.toString(
                'rgba');
        });
    });
$(document).ready(function() {
   $("#startEdit").click(function () {
    if ($("#startEdit").on('click')) {
        $(document).ready(function() {
    var font;
    $("#fonts1").on("change", function(){
        font = $(this).val();
    });
    $("#content-link2").on("click", "*", function() {
        $(this).css('font-family',font);
    });
});
$(document).ready(function() {
    var gfont;
    $("#googlefonts1").on("change", function(){
        gfont = $(this).val();
    });
    $("#content-link2").on("click", "*", function() {
        $(this).css('font-family',gfont);
    });
});
$(document).ready(function() {
    var color;
    $("#colorChoice").on('input', function(){
        color = $(this).val();
    });
    $('#content-link2').on('click', '*', function() {
        $(this).css('background',color);
  });
});
    } else {
          $( "#content-link2" ).off( "click" );
    }
  });
});
$("#startEdit").on('click', function() {
    $( "#fontsShow" ).show( "click" );
    $( "#showColor").show( "click" );
    $( "#finishEdit").show( "click" );
    $( "#startEdit").hide( "click" );
});
$("#finishEdit").on('click', function() {
    $( "#startEdit" ).show( "slow" );
    $( "#fontsShow" ).hide( "click" );
    $( "#showColor").hide( "click" );
    $( "#finishEdit" ).hide( "slow" );
    $( "#fonts1" ).hide( "slow" );
    $( "#fontsHide" ).hide( "slow" );
    $( "#hideColor" ).hide( 1000 );
    $( "#colorChoice" ).hide( "slow" );
    $( "#cp4" ).hide( "slow" );
    $( "#googleShow" ).hide( "slow" );
    $( "#googleHide" ).hide( "slow" );
    $( "#googlefonts1" ).hide( "slow" );
});

只改变其中一个字体的字体可以同时工作，但不能同时工作

0 个答案: