javascript - 使用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

如果您的类被正确标记，您的 javascript 应该可以工作。隐藏时，您应该搜索 not .negative，而不是 .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/

Answer 3

尝试这个：

$('#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 4

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

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