使用功能后减少代码并使用.off

Question

我的Javascript有两个问题，首先我认为功能很长，我想知道是否有办法减少它，问题是它需要一起工作所有这一切Javascript允许编辑页面。

第二个问题是，当我更改字体和/或选择字体大小时，它会改变这两个东西，所以例如，如果我在一个div中更改字体大小然后我想更改font-family为其他它将更改字体-size和font-family，所以我应该这样做，以便在每次编辑后关闭点击功能但如果再次按下它会将其添加回来以便可以再次使用该功能，所以当时基本上只能使用一个功能

$(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 font;
    $("#googlefonts1").on("change", function(){
        font = $(this).val();
    });
    $("#content-link2").on("click", "*", function() {
        $(this).css('font-family',font);
    });
});
$(document).ready(function() {
    var fsize;
    $("#fontsizes1").on("change", function(){
        fsize = $(this).val();
    });
    $("#content-link2").on("click", "*", function() {
        $(this).css('font-size',fsize);
    });
});
$(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" );
    }
  });

}）;

<div class="features form-group">
            <input class="filestyle form-control margin images"  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" onclick="$('#fontsizes1').bfhfontsizes({fontsize: '12'})" id="sizeShow" class="btn btn-primary form-control margin">Load font size</button>
            <button style="display: none" class="btn btn-primary form-control margin" id="sizeHide">Hide font size</button>
            <select style="display: none" id="fontsizes1" 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>