이미지 아이콘을 클릭하면 특정 DIV에 addClass가 표시됩니다.

Question

이미지 갤러리의 축소판에 즐겨 찾기 (id = "# favorites")라는 JqueryUI 버튼을 구현하려고합니다. 이 버튼은 즐겨 찾기 아이콘 (span class = "fav")의 표시를 토글합니다. 정렬 및 필터링을 허용하는 축소판 레이아웃에 Isotope을 사용하고 있습니다. 내가하려고하는 것은 Isotope DIV (class = "item")에 "즐겨 찾기"클래스를 추가하여 개별 미리보기 이미지에 대해 "즐겨 찾기"아이콘을 클릭했을 때 이미지 필터링을 허용하는 것입니다. 또한 JqueryUi 버튼을 클릭 할 때 즐겨 찾기로 표시되고 선택한 후에 토글되지 않는 각 엄지 손가락에 내 즐겨 찾기 아이콘을 붙이고 싶습니다. 지금까지 아이콘을 볼 수있게 만들고 동위 원소 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 사용

때문에 여기

는 링크입니다 코드를 동적으로 변경하지만 이것이 올바른 일이 아닐 수 있습니다.

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

문제는 당신이 당신이 상호 작용하고있는 현재의 객체를 참조 할 이 변수, 알 필요가 단순히있다. 'click()'메소드의 경우 이은 클릭 된 요소를 나타냅니다.

코드의 짧은 버전은 (이 또한 즐겨 찾기로 제거 할 수 있습니다)이 될 것입니다 :

는

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

이것은 당신이 뭔가에 방법 후 메소드를 호출 할 수 있도록 jQuery의 체인을 활용합니다. 단 하나의 ';' 기능 :에

(서식 및 물건을 의견을 주셔서 감사합니다. 이해하고 답변을 너무 쉽게!)