0

画像ギャラリーのサムネイルにfavorites（id = "＃favorites"）というJqueryUIボタンを実装しようとしています。ボタンは、お気に入りアイコン（span class = "fav"）の表示を切り替えます。サムネイルのレイアウトにIsotopeを使用しており、並べ替えとフィルタリングが可能です。私がやろうとしているのは、Isotope DIV（class = "item"）に「お気に入り」のクラスを追加して、個々のサムネイルの「お気に入り」アイコンをクリックしたときに画像をフィルタリングできるようにすることです。また、お気に入りとしてマークされている各親指にお気に入りアイコンを固定し、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;
});

Isotopeがコードに動的な変更を加えているため、.liveを使用しましたが、これは適切な方法ではない可能性があります。

4

1 に答える 1

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;
});

問題は、この変数に注意する必要があるということです。この変数は、操作している現在のオブジェクトを参照します。'click（）'メソッドの場合、これはクリックされた要素を参照します。

コードの短いバージョンは次のようになります（これにより、お気に入りを削除することもできます）。

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

これはjQueryの連鎖を利用して、何かのメソッドの後にメソッドを呼び出すことを可能にします。';'が1つだけあることに注意してください 関数内:)

（フォーマットとコメントをありがとう。理解と回答がとても簡単です！）

于 2011-03-06T19:56:15.767 に答える