ul li专属功能

Question

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

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

为了达到我的理想场景，每个对象都是独占的，如果我点击另一个 li 而前一个处于活动状态（并且形状尚未完成），我希望禁用前一个 li 元素并启用当前元素。而且，如果我在相同的 li 仍然处于活动状态时单击它，它应该只是禁用 "crayon".

我用来绘制这些形状的对象具有这样的 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

您可以为选定的蜡笔设置不同的 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 2

使用活跃的 class 可能是个好主意。每个蜡笔的属性是您可以添加到数据中的东西。不确定每次调用 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 3

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

这听起来像是 $.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 4

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

ul li专属功能

ul li exclusive function

javascript

jquery

html-lists