Filter Bilder basierend auf Sucheingabe von Bildname

Question

Ich versuche, meine Suchbox zu machen, durch mehrere Bilder auf meiner Website zu filtern. Wenn ich also omniknight in das Suchfeld eintippe, sollte der Rest der Bilder dunkler werden. Was ich versuche zu tun, kann auf dieser Website angesehen werden: http://dotaedge.com/. Ich habe die Antwort von dieser Frage versucht: Filter images based on search input of image title aber funktioniert nicht.

Da ich diese Auszeichnung:

<input type="text" placeholder="Enter hero name here" id="search"> 

<a id="Hero-7" class="hero" hero-id="7" href="#" hero-uri="rattletrap" hero-name="Clockwerk"> 
     <img class="hero-img-small" src="Dota-Heroes-Small/rattletrap_sb.png"> 
     <div class="hero-action"> 
      <img class="hero-img-large" src="Dota-Heroes-Hover/rattletrap_hphover.png"> 
     </div> 
    </a> 

<a id="Hero-8" class="hero" hero-id="8" href="#" hero-uri="omniknight" hero-name="Omniknight"> 
     <img class="hero-img-small" src="Dota-Heroes-Small/omniknight_sb.png"> 
     <div class="hero-action"> 
      <img class="hero-img-large" src="Dota-Heroes-Hover/omniknight_hphover.png"> 
     </div> 
    </a> 

<a id="Hero-9" class="hero" hero-id="9" href="#" hero-uri="huskar" hero-name="Huskar"> 
     <img class="hero-img-small" src="Dota-Heroes-Small/huskar_sb.png"> 
     <div class="hero-action"> 
      <img class="hero-img-large" src="Dota-Heroes-Hover/huskar_hphover.png"> 
     </div> 
    </a> 

Ich versuche, durch die Bilder zu filtern, mit dem folgenden Code:

$(document).ready(function() { 

$(".hero-name").hide(); 

$("#search").keyup(function(){ 

    // Retrieve the input field text 
    var filter = $(this).val(); 

    // Loop through the captions div 
    $(".hero").each(function(){ 

    // If the div item does not contain the text phrase fade it out 
    if ($(this).attr('hero-name').search(new RegExp(filter, "i")) < 0) { 
      $(this).fadeOut(); 

    // Show the div item if the phrase matches 
    } else { 
    $(this).show(); 
    } 
    }); 
}); 
}); 

Answer 1

Ihr ursprünglicher Code funktioniert gut. Sie müssen sicherstellen, dass Sie die jQuery-Bibliothek in Ihre Webseite integrieren.

Achten Sie darauf, dies in Ihre Tags aufzunehmen. Dadurch wird sichergestellt, dass die jQuery-Bibliothek hinzugefügt wird und Ihre Funktionen funktionieren.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>‌​ 

Answer 2

können Sie JavaScript indexOf Funktion verwenden, um eine Teilkette in einem suchen Zeichenfolge. Versuchen Sie, dieses

if ($(this).attr('hero-name').indexOf(filter) < 0) { 
     $(this).fadeOut(); 

    // Show the div item if the phrase matches 
} 

Answer 3

Verwenden indexOf zu überprüfen, ob filterhero-name Attribute in Elemente vorhanden ist

// Loop through the captions div 
$(".hero").each(function(){ 

// If the div item does not contain the text phrase fade it out 
if (!$(this).attr('hero-name').indexOf(filter) > -1) { 
    $(this).fadeOut(); 

// Show the div item if the phrase matches 
} else { 
    $(this).show(); 
}