Hello, I hope for your help. alt text Task: there are pictures, two buttons, and various text. When you click on the picture, it becomes highlighted. Pressing again deselects. When you click the Clear button, all selections are removed. And when you click the Check button below, a list of certain text lines appears, and if the user selects other images, another list will appear. Is it possible to implement this model on jquery? if so, what functions should selectors use? Help a newbie)

    1 answer 1

    What exactly did you cause the problem? Hang up on all the pictures handler on the click event, which will switch the class selected :

     $('img.item').click(function() { $(this).toggleClass('selected'); });

    On clear delete all classes selected :

     $('#clear').click(function() { $('img.selected').removeClass('selected'); }

    On the check pass through the cycle on all elements with the class selected and text output, then reset. The text itself can be stored in the image attribute alt or custom attribute from html5 :

     $('#check').click(function() { var list = $('<ul>').appendTo('#result'); var selected = $('img.selected'); selected.each(function() { var text = $(this).attr('alt'); $('<li>').text(text).appendTo(list); }); selected.removeClass('selected'); }

    Visual image selection is carried out using CSS:

     img.selected { outline: 2px dotted #4c6aaf; }

    And look at the selectable component of the Jquery UI library.

    • Thanks Ilya for the answer, but I have this situation: I decided to imitate the selection by replacing one picture with another, I also managed to hang the Clear button on the Clear button, that is, hide the picture. As for the text, the situation is a bit more complicated than you have presented: these are recipes that can be prepared from the products that are in the pictures. One recipe uses several items. That is, if some items (images) are selected, one list of recipes will appear, and if the user has selected other items, the list of recipes will be different. - daniel
    • As I imagine, you need to create an array of elements and make selections from it. Ilya, you could not suggest implementation. uploaded the code to the file. zalil.ru/31444946 - daniel