Jquery - возможно ли реализовать?

Рейтинг: 0Ответов: 1Опубликовано: 11.07.2011

Здравствуйте, надеюсь на вашу помощь. alt text Задача: есть картинки, две кнопки, и различный текст. При нажатии на картинку она становится выделенной. При нажатии снова выделение снимается. При нажатии кнопки Clear все выделения снимаются. А при нажатии кнопки Check ниже появляется список определенных текстовых строк, причем если пользователь выделит другие изображения - появится другой список. Можно ли данную модель реализовать на jquery? если да, то какие функции, селекторы использовать? Помогите новичку)

jquery
Источник: Stack Overflow на русском

Ответы

▲ 5

Что именно у вас вызвало проблему? Вешаете на все картинки обработчик на событие click, который будет переключать класс selected:

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

На clear удаление всех классов selected:

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

На check проход по циклу по всем элементам с классом selected и вывод текста, после чего сброс. Сам текст можно хранить в атрибуте картинки alt или custom атрибуте из 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');
}

Визуальное выделение картинки осуществляется при помощи CSS:

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

И еще посмотрите компонент selectable библиотеки Jquery UI.