ul-li专属功能

ul li exclusive function

本文关键字：功能 ul-li      更新时间：2023-09-26

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

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

为了达到我的理想场景，每个对象都是独占的，从某种意义上说，如果我在前一个li处于活动状态（并且形状尚未完成）时单击另一个CCD_2，我希望禁用前一个CCD _3元素并启用当前元素。但是，如果我在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时如何检查（请注意，我想始终只使用一支蜡笔）。

提前感谢！

使用活动类可能是个好主意。每个蜡笔的属性都是你可以添加到数据中的东西。不确定每次调用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);
});

不一定完全理解你的问题，但根据我所读到的，你想在点击蜡笔时创建一个新对象，但如果已经点击了蜡笔，就不必创建对象。

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

您可以为所选蜡笔设置不同的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
   }
});

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

相关文章：