Question

想象一下这种情况，比如我有一套蜡笔，我希望能够选择一个，然后开始绘画，但如果 - 在绘图的中间 - 我改变主意，我仍然希望能够改变蜡笔并选择不同的颜色。

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

为了实现我的理想场景，每个对象都是独占的，在某种意义上说，如果我在前一个活动时点击另一个li（并且形状尚未完成），我想要禁用上一个{ {1}}元素并启用当前元素。但是，如果我点击相同的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，如果不是，那么启动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);
});

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事件

ul li独家功能

4 个答案: