[[webdev:stuff:content-filtern-durch-tags-mit-jquery]]

Content nach Tags filtern mit Jquery

Die Regexp kann sicherlich noch verfeinert werden. Alle Elemente in der Klasse „content“ werden nach dem angeklickten Tag durchsucht, die sich in der „rel“-Attribute befinden,

<div class="content" rel="house,techno,minimal">content here</div>
tagfilter.js
$(document).ready(function(){
            $("span.tag").click(function(){
                var regex = new RegExp($(this).html(),"i");
                $(".content").each(function(){
                    if(regex.exec($(this).attr("rel"))){
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                });
            });
        });
tagfilter.example.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title><!-- Insert your title here --></title>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
     <div id="cloud" style="width:150px; margin-bottom:100px">
 
        <span title="show with tag : HOUSE" class="tag" style="font-size:20px;">HOUSE</span>&nbsp;
 
        <span title="show with tag : MINIMAL" class="tag" style="font-size:10px;">MINIMAL</span>&nbsp;
 
        <span title="show with tag : PODCAST" class="tag" style="font-size:20px;">PODCAST</span>&nbsp;
 
        <span title="show with tag : TECHHOUSE" class="tag" style="font-size:10px;">TECHHOUSE</span>&nbsp;
 
        <span title="show with tag : TECHNO" class="tag" style="font-size:20px;">TECHNO</span>&nbsp;
 
    </div>
 
    <div class="content" rel="House,minimal,Techno,podcast">
        Alles über House,minimal,Techno,podcast
    </div>
 
    <div class="content" rel="House,Techhouse,Techno,podcast">
        Alles über House,minimal,Techno,podcast
    </div>
 
    <div class="content" rel="Techno,podcast">
        Alles über House,minimal,Techno,podcast
    </div>
 
    <div class="content" rel="Techno,podcast,Techhouse">
        Alles über Oldschool,Techno,podcast,Techhouse
    </div>
 
    <script type="text/javascript">
        $(document).ready(function(){
            $("span.tag").click(function(){
                var regex = new RegExp($(this).html(),"i");
                $(".content").each(function(){
                    if(regex.exec($(this).attr("rel"))){
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                });
            });
        });
    </script>
 
</body>
</html>
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • webdev/stuff/content-filtern-durch-tags-mit-jquery.txt
  • Zuletzt geändert: 2012/07/10 07:37
  • (Externe Bearbeitung)