jquery/isotop | Grundlegende Implementierungsprobleme

Question

Ich benutze bereits scrollTo, aber das kann verschrottet oder durch etwas anderes ersetzt werden, wenn es das übertrumpft (es wird nur vom obersten Navigationsbereich zu einem Fußzeilenabschnitt gesprungen).

das Ziel ist es, die Liste der Elemente Filter mit der Isotopenfilterung zu haben, und markieren Sie vorzugsweise den ausgewählten Filter Link oben (obwohl ich ziemlich sicher bin, dass ich das funktionieren werde, sobald ich das Isotop-Bit in Basic funktioniert Form, aber würde keine Hilfe ablehnen, um dies auf einmal zu erreichen).

Ich benutze jQ 1.7.1 und Isotop, beide verkleinerte Versionen sowie scrollTo 1.4.2 minimiert. Sie können die Vollbit sehen hier: http://beta.wildcatbelts.com/wrestling-belt-gallery-ren.php

mein jQ:

$(window).load(function(){ 

var $container = $('#blist'); 

$container.isotope({ 
    itemSelector : 'ul#blist > li' 
}); 


$('#ncont a').click(function(){ 
    $.scrollTo('#fcont', 1200, {axis:'y'}); 
}); 

$('#filters a').click(function(){ 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 
    return false; 
}); 

}); 

führende mit:

$(document).ready(function(){ 

... doesn (was ich öfter zu sehen gewohnt bin)‘ Es funktioniert nicht, weil ein anderes (altes, verlassenes) Plugin auf einer anderen Seite (nur auf der Startseite) fehlschlägt. Ich werde gerne jede Version auf den Seiten verwenden, die notwendig sind, damit beide funktionieren.

mein Markup:

<ul id="filters" class="option-set" data-option-key="filter"> 
    <li><a href="#" data-filter="*" class="selected">Show All</a></li> 
    <li><a href="#" data-filter=".P5">5 Plates</a></li> 
    <li><a href="#" data-filter=".P3">3 Plates</a></li> 
    [ * several more filters] 
    </ul> 

    <ul id="blist"> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P0"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P3"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P0"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P0"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P3"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    [ * many, many more ] 
    </ul> 

Dank.

Answer 1

Ihre Filter funktionieren nicht, weil die itemSelector nichts finden kann, das übereinstimmt. Der Selektor sollte nur .belts sein, da er bereits im Element $container sucht.

Hier ist die aktualisierte Javascript (ich den scrollTo Teil ignoriert habe):

$(function(){ 

    // set up jquery isotope 
    var $container = $('#blist'); 

    $container.isotope({ 
    itemSelector : '.belts' 
    }); 

    $('#filters a').click(function(){ 

    // manage classes for selected/clicked on links 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
    } else { 
     $(this).addClass('selected');   
    } 

    // get the current selection and apply the filter 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 
    return false; 
    }); 
}); 

Sie ein erstellen können #filters a.selected Klasse alle ausgewählten Links in Ihrem Filterabschnitt, um Stil, wie ich in der Javascript für die hinzugefügt habe .

Diese Seite aus der jQuery Isotope Dokumentation erklärt, wie man combination filters macht und es gibt eine Diskussion in einem GitHub-Problem über combination (AND and OR) filters.