addClass для определенного DIV при нажатии на значок изображения - PullRequest
Новая
       2

addClass для определенного DIV при нажатии на значок изображения

0 голосов
/ 06 марта 2011

Я пытаюсь реализовать кнопку JqueryUI под названием избранное (id = "# Favorites") для миниатюр в галерее изображений. Кнопка переключает отображение значка избранного (span class = "fav"). Я использую Изотоп для макета миниатюры, которая позволяет сортировать и фильтровать. То, что я пытаюсь сделать, это добавить класс «избранных» в Isotope DIV (class = «item»), чтобы разрешить фильтрацию изображений при нажатии на значок «fav» для отдельного эскиза. Я также хочу, чтобы мой значок избранного прикреплялся к каждому большому пальцу, который отмечен как избранный, и не переключался после выбора при нажатии кнопки JqueryUi. Пока я могу сделать значки видимыми и добавить класс в DIV изотопа, за исключением того, что он добавляет класс ко всем DIV, а все избранные значки остаются видимыми. Мне нужно, чтобы он только изменял конкретный DIV и любимый значок этого конкретного эскиза. Я все еще изучаю jquery, и мой код находится в зачаточном состоянии и может быть совершенно неверным для этой цели. Буду признателен за любую помощь или направление!

Вот ссылка: Галерея Нажатие на кнопку «Fav» переключает значки

HTML: 

<div class="item">
    <a href="image.jpg" title="Image">
        <img src="image.jpg" width="80" height="80" alt="Image" />
    </a>
    <span class="fav ui-icon ui-icon-heart"></span>
    <div class="title">Image 1</div>
</div>

Код кнопки: 

// JQuery Ui button setup
$( "#favorites" ).button({
    label: "Fav",
    icons: { primary: "ui-icon-heart" }
});

// initially hides the icon
$('span.fav').hide();

//click function to toggle icon under thumbs
$("#favorites" ).click(function() {
    $('span.fav').slideToggle('slow'); 
    return false;
});

// my attempt at adding a class 'sticky' to icon to make it stay visible as well as add class '.favorites' to '.item' div to set it up for filtering
$("span.fav" ).live('click', function() {
    $('.fav').addClass("sticky");

    $('.fav').each(function ()
    {
        $(this).removeClass("fav");
    });  
    $('.item').each(function ()
    {
        $(this).addClass("favorites");
    });  
    return false;
});

Я использовал .live, потому что Isotope вносит динамические изменения в код, но это может быть не правильно.

1 Ответ

1 голос
/ 06 марта 2011

Мне кажется, что весь вопрос может быть просто в неправильном понимании функций jQuery, которые вы используете.переменная , которая будет ссылаться на текущий объект, с которым вы взаимодействуете.В случае метода click () this относится к элементу, по которому был выполнен щелчок.

Более короткая версия кода будет такой (что также позволяет удалять избранное): 

$("span.fav").live('click', function() {
  $(this).toggleClass('sticky')
    .toggleClass('fav')
    .parent()
    .toggleClass('favorites');
});

Это использует преимущества цепочки jQuery, позволяя вам вызывать метод за методом для чего-то.Обратите внимание только на один ';'в функции:)

(Спасибо за форматирование и комментирование ваших материалов. Намного проще понять и ответить!)

...