使用javascript隐藏同一类的所有tr

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

这应该工作：

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

Answer 2

尝试这个：

$('#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.
}); 

另请注意，该表不应直接包含tr作为后代。

演示版

Answer 3

如果您的类被正确标记，则您的JavaScript应该可以正常工作。 隐藏时，您应该搜索的不是.negative，也不是其他人提到的.positive。但是，如果您的代码根本不起作用，则错误在于您如何布置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();}); 
    }); 

});

基本模型与一些普通的html： http : //jsfiddle.net/v8k3H/3/

Answer 4

是否添加了jquery.js文件。 您似乎忘记了添加.js文件或未加载文件。

并检查拼写“正” /“正”