正在寻找一种在spectrumjs中具有相同类名的两个不同按钮上触发单独事件的方法

Looking for a way to fire separate events on two different buttons with same class name in spectrumjs

本文关键字：按钮 两个 事件 方法 单独 同类 一种 寻找 spectrumjs      更新时间：2023-09-26

我使用的是spectrumjs，当单击一个按钮时，它会调用两个按钮的代码。如果我可以更改其中一个按钮的类名，问题就会得到解决，但是颜色选择器是动态生成的，我不知道如何重新配置代码。

这是我所拥有的：

$(".sp-choose").click(function(){
    bgColor = $("#custom").spectrum("get");
    bgColor = bgColor.toHexString();
    canvas.backgroundColor = bgColor;
    canvas.setBackgroundImage();
    canvas.renderAll();
});
$(".sp-choose").click(function() {
    newColor = $("#custom2").spectrum("get");
    newColor = newColor.toHexString();
    canvas.freeDrawingBrush.color = newColor;
    drawColor();
    canvas.renderAll();
});

当我更改文本的颜色并单击sp选择按钮时，我会丢失原始背景色，因为这两种颜色都会被调用。在最初更改颜色，然后正确更改背景色或文本颜色后，不会发生这种情况。主要是在第一次更改文本颜色之后，我才失去了背景。

如果只有两个按钮，并且您不需要漂亮的解决方案，则可以通过索引将这两个按钮分开：

$(".sp-choose").eq(0).click(function(){
    bgColor = $("#custom").spectrum("get");
    bgColor = bgColor.toHexString();
    canvas.backgroundColor = bgColor;
    canvas.setBackgroundImage();
    canvas.renderAll();
});
$(".sp-choose").eq(1).click(function() {
    newColor = $("#custom2").spectrum("get");
    newColor = newColor.toHexString();
    canvas.freeDrawingBrush.color = newColor;
    drawColor();
    canvas.renderAll();
});

如果只有两个按钮，则

$(".sp-choose").click(function (e) {
    if (this == $(".sp-choose")[0]) {
        bgColor = $("#custom").spectrum("get");
        bgColor = bgColor.toHexString();
        canvas.backgroundColor = bgColor;
        canvas.setBackgroundImage();
        canvas.renderAll();
    }
});
$(".sp-choose").click(function (e) {
    if (this == $(".sp-choose")[1]) {
        newColor = $("#custom2").spectrum("get");
        newColor = newColor.toHexString();
        canvas.freeDrawingBrush.color = newColor;
        drawColor();
        canvas.renderAll();
    }
});

或者类似的，会起作用。第一个按钮运行第一个功能，第二个按钮运行第二个功能。您可以将两者合并为一个函数，然后在其中切换。

$(".sp-choose").click(function (e) {
    if (this == $(".sp-choose")[0]) {
        bgColor = $("#custom").spectrum("get");
        bgColor = bgColor.toHexString();
        canvas.backgroundColor = bgColor;
        canvas.setBackgroundImage();
        canvas.renderAll();
    }
    if (this == $(".sp-choose")[1]) {
        newColor = $("#custom2").spectrum("get");
        newColor = newColor.toHexString();
        canvas.freeDrawingBrush.color = newColor;
        drawColor();
        canvas.renderAll();
    }
});

像这样

http://jsfiddle.net/eLdnt1zf/1/

相关文章：