ul li独家功能

Question

想象一下这样的情况，例如我有一组蜡笔，我希望能够拿起蜡笔并开始绘制，但是如果-在绘制过程中-我改变了主意，我仍然希望能够更改蜡笔，并选择不同的颜色。

所以，我已经取得了ul元素的列表，我想在他们每个人的对象，它，它的方法中，绘制形状的能力结合。

为了达到理想的效果，每个对象都是互斥的，这意味着如果我在前一个li处于活动状态（并且形状尚未完成）时单击另一个li ，则希望禁用前一个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另一只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);
});

Answer 2

不确定是否完全理解您的问题，但是根据我的阅读，您想在单击蜡笔时创建一个新对象，但是如果已经单击了蜡笔，则不必创建该对象。

听起来像$.data() ！

基本上，您只需检查HTML节点是否作为其数据中的对象。 如果没有，您只需分配一个。

$('.crayon-toolbox').on('click', 'li', function(){ //I've used delegation here, need to target the LI itself for the data.
    var $this = $(this);
    var my_crayon = $this.data('crayon') || new Crayon();

    $this.data('crayon', my_crayon);
});

Answer 3

您可以为选定的蜡笔设置不同的CSS，如下所示：

$('.crayon').click(function(){
    if($(this).hasClass('selected'))
          {$(this).removeClass('selected'); 
           //if there is a code for disabling current crayon add it here
          }
   else{
          $('.crayon').removeClass('selected');
          $(this).addClass('selected');
          //if there is a code for selecting or disabling crayon add here
   }
});

Answer 4

您可以尝试在每个li上添加onClick事件