单击图像图标时将Class添加到特定DIV

Question

我正在尝试为图片库中的缩略图实现一个名为 favorites (id="#favorites") 的 JqueryUI 按钮。该按钮可切换收藏夹图标 (span class="fav") 的显示。我使用同位素作为缩略图布局，它允许排序和过滤。我想做的是将一类“收藏夹”添加到同位素 DIV (class="item")，以便在单击单个缩略图的“收藏夹”图标时允许过滤图像。我还希望我的收藏夹图标粘在标记为收藏夹的每个拇指上，并且在单击 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 正在对代码进行动态更改，但这可能不是正确的做法。

Answer 1

在我看来，整个问题可能只是对您正在使用的 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 的链接，允许您在某些内容上调用一个又一个的方法。注意只有一个“;”在函数中:)

（感谢您对您的内容进行格式化和评论。这样更容易理解和回答！）