Question

我有很少的编辑选项供用户使用，例如更改字体大小或字体系列甚至div的颜色，但是我有一个问题，希望对你们来说非常简单。

基本上，只要有人完成设置font-family或任何其他功能，我就想做.off事件以阻止特定功能工作。

在这里发生了什么，有人选择字体系列并更改div1中的字体，然后他们选择字体大小并想要更改div2中的字体大小，但是font-family和font-size都是应用因为font-family的值一直存储。

我有3个解决方案，但我不确定它们是否正确： 1.做一个循环，它会对每个元素执行.off，期望一个被点击的元素。 2.根据按下的按钮，仅设置1个将被不同值替换的变量？ 3.也许使用不同的事件监听器，这样每个功能都可以独立工作？

这里有一些示范来展示我的意思： 1.蓝色背景颜色应用于div。 2.选择font-family并应用于不同的div，但也会应用背景颜色。

当我选择font-family时，它应该删除背景颜色的值并且不应用它，只有font-family，反之亦然

总而言之，我正在寻找一个关于如何在使用后关闭事件的解决方案，如果再次按下按钮，则重新绑定元素以使其正常工作。确保每个＆＃34;事件＆＃34;听众是独立工作而不是一起工作。我不确定我是否应该把它放在某个循环中，或者还有其他任何解决方案吗？

  var font;
    $("#fonts1").on("change", function(e){
        font = $(this).val();
        e.stopPropagation();
    });
    $("#content-link2").on("click", "*", function(e) {
        $(this).css('font-family',font);
        e.stopPropagation();
    });
    var font2;
    $("#googlefonts1").on("change", function(){
        font2 = $(this).val();
    });
    $("#content-link2").on("click", "*", function() {
        $(this).css('font-family',font2);
    });
    var fsize;
    $("#fontsizes1").on("change", function(){
        fsize = $(this).val();
    });

<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>

.on和.off在多个事件和元素中一起工作

0 个答案: