Question

我正在制作应用程序。我有2个工具（铅笔和橡皮擦）和一些颜色。现在，当我检查铅笔时，我可以选择一种颜色，但是当我检查橡皮擦并且我想选择一种颜色时，我想再次检查铅笔工具，而是选择橡皮擦工具。

任何指导都很受欢迎。

以下是一个示例和代码：

代码：

HTML：

<!-- Pencil & Eraser -->
<div class="graphic-tools">
  <!-- <div id="pencil" class="pencil"></div> -->
  <input checked="checked" id="pencil" type="radio" name="tool" value="pencil" />
  <label class="tool pencil" for="pencil"></label>
  <p class="">Potlood</p>

  <!-- <div id="eraser" class="eraser"></div> -->
  <input id="eraser" type="radio" name="tool" value="eraser" />
  <label class="tool eraser" for="eraser"></label>
  <p>Gum</p>
</div>

<!-- colors -->
<div id="colors" class="colors"></div>

JavaScript：

// Color swatches
var colors = ['#000000', '#274e8d', '#6bb44b', '#e5cd46', '#e98b3a', '#d83538'];

for (var i = 0, n=colors.length; i<n; i++) {
    var swatch = document.createElement('div');
    swatch.className = 'swatch';
    swatch.style.backgroundColor = colors[i];
    swatch.addEventListener('click', setSwatch);
    document.getElementById('colors').appendChild(swatch);
}

function setColor(color) {
    context.fillStyle = color;
    context.strokeStyle = color;

    var active = document.getElementsByClassName('activeSwatch')[0];

    if (active) {
        active.className = 'swatch';
    }
}

function setSwatch(e) {
    //identify swatch
    var swatch = e.target;
    //set color
    setColor(swatch.style.backgroundColor);
    //give active class
    swatch.className += ' activeSwatch';
}

setSwatch({target: document.getElementsByClassName('swatch')[0] });


// Determine Tool
document.getElementById('pencil').onchange = function() {
    if (this.checked) {
        tool = 'pencil';
        setSwatch({target: document.getElementsByClassName('swatch')[0] });
    }
};
document.getElementById('eraser').onchange = function() {
    if (this.checked) {
        tool = 'eraser';
        setColor('#FFFFFF');
    }
};

Answer 1

不确定我是否正确理解了您的问题，因此我会尝试对其进行改写。

如果选择了橡皮擦并且用户选择了某种颜色，您是否希望自动选择铅笔工具？这样用户就不会用橡皮擦画？

如果是这样，那么你应该修改你的setSwatch方法来检查所选工具实际上是否是铅笔工具。如果没有，您可能想要选择它。有很多方法可以做到这一点，其中之一是：

function setSwatch(e) {
    //identify swatch
    var swatch = e.target;

    //ensure that pencil is selected
    if (tool !== 'pencil') {
        //just not sure which browsers support this
        //also, this is not very good, since you'll
        //switch color twice, so consider refactoring
        document.getElementById('pencil').click();
    }

    //set color
    setColor(swatch.style.backgroundColor);

    //give active class
    swatch.className += ' activeSwatch';
}

更改后返回默认复选框

1 个答案: