Question

我正在尝试为图片库中的缩略图实现名为favorites（id =“＃favorites”）的JqueryUI按钮。该按钮切换收藏夹图标的显示（span class =“fav”）。我使用Isotope进行缩略图布局，允许排序和过滤。我想要做的是在Isotope DIV（class =“item”）中添加一类“收藏夹”，以便在单个缩略图单击“fav”图标时过滤图像。我还希望我的收藏夹图标粘贴到标记为收藏夹的每个拇指上，并且在单击JqueryUi按钮后选择后不切换。到目前为止，我能够使图标保持可见并将类添加到Isotope DIV，除了它将类添加到所有DIV以及所有喜欢的图标保持可见。我需要让它只改变特定缩略图的特定DIV和喜欢的图标。我仍在学习jquery，我的代码很简陋，可能完全错误。任何帮助或指示将不胜感激！

这是一个链接：Gallery 单击“收藏”按钮切换图标

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（）”方法，此指的是被点击的元素。

代码的较短版本就是这个（它也允许删除收藏夹）：

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

这利用了jQuery的链接，允许你在方法之后调用方法。只注意一个';'在功能:)）

（感谢格式化和评论你的东西。更容易理解和回答！）

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

1 个答案: