Скрыть все tr с тем же классом, используя javascript

Question

Я хочу скрыть каждый tr с классом, отличным от «положительного» при нажатии на «положительную» ссылку, и скрыть все tr с классом, отличным от «отрицательного», при нажатии «отрицательный», ссылка.

Это мой HTML:

<a href="" id="positive"> Positive rows</a> 
<a href="" id="negative"> Negative rows</a> 
<?php 
$i=1; 
while ($u=mysql_fetch_array($result2)){ 
?> 
<tr id="row<?php echo $i;?>" class="<?php echo $u['positive_negative'];?>"> //echo $u['positive_negative'] can result on "Positive" or "Negative" text. 
    <td><? echo $u['date'];?></td> 
    <td><? echo $u[''positive_negative'];?></td> 
    <td><? echo $u['user_id'];?></td> 
</tr> 
<?php 
$i++; 
}; 
?> 

Я попробовал этот сценарий, но не работает:

$(document).ready(function(){ 
$('#positive').click(function(){ 
$('.positive').show(200); 
$('.negative').hide(200); 
}); 
$('#negative').click(function(){ 
$('.negative').show(200); 
$('.positive').hide(200); 
}); 
}); 

Заранее спасибо за любую помощь!

Answer 1

Попробуйте это:

$('#positive, #negative').click(function(e){ 
    e.preventDefault(); 
    $('tr').not($('.'+this.id).show(200)).hide(); 
    //select all tr, provide a specific table id as well to distinguish, but not the ones with this classname which you want to show hide others. 
}); 

Также обратите внимание на таблицу не следует непосредственно содержать тр как потомок.

Demo

Answer 2

Это должно работать:

$('tr').not('.positive').hide(); 

Answer 3

Ваш Javascript должен работать, если ваши классы маркируются должным образом. Когда вы скрываете, вы должны искать не .native, а не .позитивный, как другие ссылались, но если ваш код вообще не работает, ошибка заключается в том, как вы выложили свой html, а не ваш javascript , как я протестировал с помощью jsfiddle. Проверьте в firebug или инструментах разработчика, чтобы узнать, правильно ли назначены имена классов или имеются ли ошибки в консоли.

Вот еще один способ сделать это с FadeIn и FADEOUT, но более ранние примеры будут работать также:

$(document).ready(function(){ 
    $('#positive').click(function(){ 
     $('tr').not('.positive').fadeOut(function(){$('.positive').fadeIn();}); 
    }); 

    $('#negative').click(function(){    
     $('tr').not('.negative').fadeOut(function(){$('.negative').fadeIn();}); 
    }); 

}); 

Basic макет с некоторыми ванильным HTML: http://jsfiddle.net/v8k3H/3/

Answer 4

Добавили ли вы jquery.js файл. Похоже, вы забыли добавить файл .js или он не загружается.

И проверить орфографию «Позитивный»/«положительный»