ul li独家功能

Question

Imagine the situation like i have a set of crayons, and I want to be able to pick one up, and start drawing, but if -in the middle of the drawing- I change my mind, I still want to be able to change the crayon and pick up a different color.

So I have made a ul list of elements, and I want to bind on each of them an object, which has, among its methods, the ability to draw a shape.

To reach my ideal scenario, each object is exclusive, in the sense that if I click on another li while the previous is active (and the shape is not yet completed), I want the disable the previous li element and enable the current one. But also, if I click on the same li while it's still active, it should simply disable the "crayon".

The objects I'm using to draw such shapes, possesses such enable() and disable() function, so I guess it's just a matter of establishing the right combination of controls...which sadly seems I'm not able to do.

Here's an example:

 <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();
 })

Can anyone point me out in the right direction?
It seems to me that every time I click on a li I should check if that li has been clicked, and if not so start the Crayon object...or something like that, but I'm not sure how to check when I click on another li (mind you I want to use only one crayon at all times).

Thanks in advance!

Answer 1

It might be a good idea to work with an active class. The properties of each crayon is something you can add in the data perhaps. Not sure if calling new Crayon() each time is performant ... Instead I suggest to add a method inside the Crayon object that allows you to change it's properties.

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

Not sure to fully understand your question, but from what I've read, you want to create a new object when you click on a crayon, but if the crayon has already been clicked, it doesn't have to create the object.

That sound like a job for $.data() !

Basically, you simply check if the HTML node as a object in its data. In case it doesn't, you simply assign one.

$('.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

you can just set different css for selected crayon like below:

$('.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事件