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作为后代。

<强> Demo

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();}); 
    }); 

});

使用一些vanilla html的基本模型： http://jsfiddle.net/v8k3H/3/

Answer 4

您是否添加了jquery.js文件？看起来你忘了添加.js文件或者它没有加载。

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

使用javascript将所有tr隐藏在同一个类中

4 个答案: