使用javascript隐藏所有具有相同类的tr答案

【问题标题】：Hide all tr with the same class using javascript使用javascript隐藏所有具有相同类的tr
【发布时间】：2013-09-30 23:47:42
【问题描述】：

我想在点击“肯定”链接时隐藏所有类别不同于“肯定”的 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); 
}); 
});

提前感谢您的帮助！

【问题讨论】：

标签： javascript hide show tr

【解决方案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.
});

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

Demo

【讨论】：

【解决方案2】：

这应该可行：

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

【讨论】：

你能做一个jsfiddle或jsbin吗？

【解决方案3】：

如果您的类被正确标记，您的 javascript 应该可以工作。隐藏时，您应该搜索 not .negative 和 not .positive 就像其他人提到的那样，但是如果您的代码根本不起作用，则错误在于您如何布置 html，而不是您的 javascript ，正如我用 jsfiddle 测试过的那样。检查萤火虫或开发者工具，看看你的类名是否被正确分配，或者控制台中是否有任何错误。

下面是使用 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/

【讨论】：

【解决方案4】：

您是否添加了 jquery.js 文件。您似乎忘记添加 .js 文件或者它没有加载。

并检查拼写“Positive”/“positive”

【讨论】：