Jquery 切换表格和图标_Jquery_Html

Jquery 切换表格和图标

jquery html

Jquery 切换表格和图标,jquery,html,Jquery,Html,我有一个脚本，帮助我切换我的表，但它失败的图标。所以请帮我修改一下。在这里，我在单击后获取类名，最后执行切换操作 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> function alok(obj){ var s= $

我有一个脚本，帮助我切换我的表，但它失败的图标。所以请帮我修改一下。在这里，我在单击后获取类名，最后执行切换操作

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function alok(obj){
var s= $(obj).attr('class');

$("."+s+":not(:first)").toggle(function() {
$('.'+s).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif");
}, function() {
    $('.'+s).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif");
});
}
</script>
</head>
<body>

<table>
<tr  class="b" onclick=alok(this)><td><img src="http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif">qw</td></tr>
<tr  class="b"><td>alok</td></tr>
<tr  class="b"><td>verma</td></tr>
<tr  class="c" onclick=alok(this)><td>qw</td></tr>
<tr  class="c"><td>alok</td></tr>
<tr  class="c"><td>verma</td></tr>

</table>

</body>
</html>


函数alok（obj）{
var s=$（obj.attr（'class'）；
$（“+s+”：非（：第一个）”）。切换（函数（）{
$（'.+s）.children（“img”）.attr（“src”），“http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif");
}，函数（）{
$（'.+s）.children（“img”）.attr（“src”），“http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif");
});
}
量子阱
阿洛克
维尔玛
量子阱
阿洛克
维尔玛

试试这个

function alok(obj){
   var s= $(obj).attr('class');
   var $img=$('.'+s).find("img");
   var src=($img.attr("src")=='http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif') ?
        'http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif':
        'http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif';
   $img.attr("src",src);
}

您需要使用“查找”而不是“儿童”，“儿童”只需向下检查一个级别，而“查找”则会更深入

<script>
function alok(obj){
var s= $(obj).attr('class');

$("."+s+":not(:first)").toggle(function() {
$('.'+s).find("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif");
}, function() {
        $('.'+s).find("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif");
});
}
</script>


函数alok（obj）{
var s=$（obj.attr（'class'）；
$（“+s+”：非（：第一个）”）。切换（函数（）{
$（'.+s）.find（“img”）.attr（“src”），“http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif");
}，函数（）{
$（'.+s）.find（“img”）.attr（“src”），“http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif");
});
}

试试这种方法

function alok(obj){
var s = $(obj).attr('class');

    if( !$(obj).hasClass('collapse') ){
        $(obj).children().children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif");
        $(obj).addClass('collapse');
    } else {
        $(obj).children().children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif");
        $(obj).removeClass('collapse');
    }

}