javascript - ul li专属功能

Question

想象一下我有一套蜡笔的情况，我希望能够挑选 起来，开始画画，但如果 - 在画画的中间 - 我改变了主意，我仍然希望能够更换蜡笔并选择不同的颜色。

所以我制作了一个 ul 元素列表，我想在每个元素上绑定(bind)一个对象，该对象在其方法中具有绘制形状的能力。

为了达到我的理想场景，每个对象都是独占的，在某种意义上，如果我点击另一个 li 而前一个处于事件状态(并且形状尚未完成)，我想要禁用前一个 li 元素并启用当前元素。 而且，如果我在相同的 li 仍处于事件状态时单击它，它应该只是禁用“蜡笔”。

我用来绘制这些形状的对象具有这样的enable() 和disable() 函数，所以我想这只是建立正确的问题控件的组合...遗憾的是我似乎做不到。

这是一个例子:

 <ul class='crayon-toolbox'>
     <li id='1' class="crayon"></li>
     <li id='2' class="crayon"></li>
     <li id='3' class="crayon"></li>
 </ul>

 $('.crayon-toolbox').on('click', function(){
    new Crayon();
 })

谁能指出我正确的方向？
在我看来，每次我点击 li 时，我都应该检查 li 是否已被点击，如果没有，则启动 Crayon 对象......或类似的东西那个，但是当我点击另一个 li 时，我不确定如何检查(请注意，我想始终只使用 一根蜡笔)。

提前致谢!

Answer 1

使用事件类可能是个好主意。 每个蜡笔的属性是您可以添加到数据中的东西。不确定每次调用 new Crayon() 是否高效... 相反，我建议在 Crayon 对象中添加一个方法，允许您更改它的属性。

HTML

<ul class='crayon-toolbox'>
    <li class="crayon" data-color="red"></li>
    <li class="crayon" data-color="green"></li>
    <li class="crayon" data-color="blue"></li>
</ul>

JS

var anyCrayon = new Crayon();

$('.crayon-toolbox').on('click', function(){
    var crayon = $(this),
        color = crayon.data('color');

    anyCrayon.setColor(color);
});