addClass к определенному DIV при щелчке по значку изображения

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

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

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 динамически изменяет код, но это может быть неправильным поступком.


jquery jquery-ui addclass
person Macsupport    schedule 06.03.2011    source источник
comment
Пожалуйста, отформатируйте свой код.   -  person artyom.stv    schedule 06.03.2011
comment
Я не совсем понимаю ваш вопрос ... может быть, помогут несколько абзацев или маркированных пунктов, а также комментарии в коде. Но я думаю, что вы спрашиваете следующее: у вас есть кнопка «Избранное» на боковой панели, и вы хотите, чтобы она отображала значок избранного под каждым изображением. Вы хотите, чтобы при повторном щелчке по нему скрывались все избранные значки, на которые не нажимал пользователь? Не могли бы вы немного уточнить?   -  person Groovetrain    schedule 06.03.2011
comment
да. это все, а также добавить избранные классы в конкретный div, содержащий миниатюру (.item). Этот класс используется для фильтрации изображений, которые будут выбраны как избранные.   -  person Macsupport    schedule 06.03.2011
comment
Я добавил комментарии, чтобы прояснить ситуацию. Извините за путаницу.   -  person Macsupport    schedule 06.03.2011

Ответы (1)


arrow_upward
1
arrow_downward

Мне кажется, что вся проблема может заключаться в неправильном понимании используемых вами функций jQuery.

$("span.fav" ).live('click', function() {
    // This adds the 'sticky' class to EVERY html element on the page that matches '.fav'
    // $('.fav').addClass("sticky");
    // Try this:
    $(this).addClass("sticky");

    // This is a similar problem here.  You're getting everything that matches '.fav'
    // and you REALLY want just the current item you clicked on.
    /*
    $('.fav').each(function ()
    {
        $(this).removeClass("fav");
    });
    */
    // Try this instead:
    $(this).removeClass("fav");

    // Again, you don't want every '.item', but just the one related to the favorite
    // that you just clicked
    /*
    $('.item').each(function ()
    {
        $(this).addClass("favorites");
    });
    */
    // Do this instead, using $(this) as the DOM element where you're starting from:
    // First, get to the icon's parent, which is the specific 'div.item' you want
    // and then just add the class to that one
    $(this).parent().addClass('favorites');

    // You really only need return false on stuff like <a> tags to prevent
    // them from doing what they would normally want to, and GO somewhere
    // return false;
});

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

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

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

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

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

person Groovetrain    schedule 06.03.2011
comment
Спасибо за помощь. Он работает хорошо, за исключением одной проблемы, связанной с динамическим добавлением новых превью. Значки отображаются и скрываются, как и ожидалось, и я вижу, что класс «sticky» применяется так же, как и избранные классы к div, но класс «fav» не удаляется на недавно добавленных больших пальцах. Я добавил ваш код в качестве обратного вызова для запуска после динамического добавления больших пальцев, но по какой-то причине .toggleClass ('fav') не работает. - person Macsupport; 06.03.2011
comment
@Mike Проблема будет в том, что когда вы отключите класс fav, даже щелчок в реальном времени больше не будет привязан к этому конкретному диапазону, поскольку он больше не соответствует селектору! Я думаю, вам следует просто оставить класс fav в покое, чтобы jQuery все еще мог его найти. - person Groovetrain; 07.03.2011