각 요소의 Isotope 필터 링크

Question

나는이 게임에 비교적 익숙하며 누구든지 나를 도울 수 있는지 알고 싶다.

상단의 메뉴에서 내 필터 중 하나처럼 동작하는 요소에 링크를 만들려고합니다.이 경우 .graphic! 여기

<section id="options" > 
<ul id="nav" class="drop option-set clearfix" data-option-key="filter"> 
<li id="filters"><a href="#filter" data-option-value=".home" class="selected">home</a></li> 
<li id="filters"><a href="#filter" data-option-value=".product">industrial design</a></li> 
<li id="filters"><a href="#filter" data-option-value=".graphic">website design</a></li> 
<li id="filters"><a href="#filter" data-option-value=".hosting">website hosting</a></li> 
<li id="filters"><a href="#filter" data-option-value=".ip">zelo ip</a></li> 
<li id="filters"><a href="#filter" data-option-value=".research">research</a></li> 
<li id="filters"><a href="#filter" data-option-value=".contact">contact us</a></li> 
</ul> 
</section> 

요소입니다 : 여기

내 메뉴입니다

<div class="element home width4 height2" style="background-size: 100% Auto; background-repeat: no-repeat; background-position: 0px 0px;background-image:url('images/home/004.jpg');"> 
<p class="weight"><a href="#filter" data-option-value=".graphic">more...</a></p></div> 

내가 잘못하고있는 중이 야 무슨 일이?

는

데모는 여기에서 볼 수 있습니다 : 링크 자체가 ID를 options와 섹션에 포함 된 클래스 option-set와 <ul>에 포함되어 있기 때문에 http://zelo.co.uk/dynamic가

Answer 1

은 상단 메뉴 링크가 동위 원소 필터로 제대로 작동;

<section id="options" > 
       <ul id="nav" class="drop option-set clearfix" data-option-key="filter"> 
        <li id="filters"><a href="#filter" data-option-value=".home" class="selected">home</a></li> 
        <li id="filters"><a href="#filter" data-option-value=".product">industrial design</a></li> 
..... 

(각 목록 항목에 동일한 ID를 적용해서는 안되며 ID는 고유해야 함).

동위 원소를 적용 할 책임이있는 JS의 관련 섹션은 아래에 있습니다.이 기능을 사용하려면 마크 업을 변경하여 모든 링크가 동일한 JS 기능으로 처리되거나 대상이되는 새로운 기능을 생성해야합니다 특히 페이지의 기본 컨테이너에있는 링크 (어쩌면 각각의 특정 클래스를 적용하여).

var $optionSets = $('#options .option-set'), 
     $optionLinks = $optionSets.find('a'); 

    $optionLinks.click(function(){ 
    var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
     return false; 
    } 
    var $optionSet = $this.parents('.option-set'); 
    $optionSet.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    // make option object dynamically, i.e. { filter: '.my-filter-class' } 
    var options = {}, 
     key = $optionSet.attr('data-option-key'), 
     value = $this.attr('data-option-value'); 
    // parse 'false' as false boolean 
    value = value === 'false' ? false : value; 
    options[ key ] = value; 
    if (key === 'layoutMode' && typeof changeLayoutMode === 'function') { 
     // changes in layout modes need extra logic 
     changeLayoutMode($this, options) 
    } else { 
     // otherwise, apply new options 
     $container.isotope(options); 
    } 

    return false; 
    });