Filter posts without AJAX

Posted by Wannes under jQuery on 1/31/2012 | Points: 10 | Views : 3372 | Status : [Member] | Replies : 0
I currently got a page with 2 kinds of posts: pics and videos.
Now I want to filter those without using ajax.

I gave every post a class (video of pic) and the menu also has the same classes.
So basicly what I need to do is say: if the class of this div isn't the same as the class of the clicked menu item, then put the opacity to 0. Otherwise opacity needs to be 1.

Well, that doesn't work and I have totally no idea why.

Here's my HTML menu
{foreach $submenu as $menuitem key=ky}
{if $subpage == $menuitem.page_id}
<li class="activeSub">
<a href="index.php?page=brainstorm&amp;filter={$menuitem.page_id}" name="{$menuitem.page_id}" class="{$menuitem.page_id}">{$menuitem.link_tekst}</a>
<li><form action="index.php?page=brainstorm&amp;action=toevoegen" method="post" id="uploadForm" enctype="multipart/form-data">
<input type="file" id="uploadMedia" name="uploadMedia" value="Upload" required/><input type="submit" value="Upload" name="btnUpload" id="btnUpload"/>

Here's the code of my posts
{foreach $brainstorms as $brainstorm key=k}
<div class="depost {if $brainstorm.categorie_id == 1}foto{else}video{/if}">
<div class="postTop"></div>

{if $brainstorm.categorie_id == 1}
<div class="foto{$brainstorm.categorie_id}">
<img src="assets/geupload/foto/{$brainstorm.pad}" alt="assets/geupload/{$brainstorm.pad}" class="eenFoto"/>
<div class="video{$brainstorm.categorie_id}">
<video controls="controls">
<source src="assets/geupload/video/{$brainstorm.pad}.mp4" type="video/mp4" />
<source src="assets/geupload/video/{$brainstorm.pad}.ogg" type="video/ogg" />
<source src="assets/geupload/video/{$brainstorm.pad}.webm" type="video/webm" />
<div id="flashcontainer">
<a href="assets/geupload/video/{$brainstorm.pad}.mp4">your browser does not support HTML5 or flash download MP4 version</a>
<div class="postBottom"><a href="index.php?page=brainstorm&amp;id={$brainstorm.uploadid}" class="link">Bekijk de comments</a></div>

And here's my jQuery
thisItem = $(this).attr('class');

if(thisItem != "alles") {
//$('#contentBr div[class !='+thisItem+']').stop().animate({'opacity' : 0});
//$('#contentBr div[class =='+thisItem+']').stop().animate({'opacity' : 1});
$('#contentBr .'+thisItem).css("opacity", 1);
$('#contentBr div:not(.'+thisItem+')').css("opacity", 0);
} else {
$('#contentBr div').stop().animate({'opacity' : 1});

Doesn't matter if I use this code or the code I put in comment, when I click my menu everything fades out.

Help would be awesome


(No response found.)

Login to post response