使用JQuery查找下一个表行

使用JQuery,如何将click事件绑定到表单元格(下面,class ="expand"),这将改变图像src(在单击的单元格中 - 原始将是plus.gif,与minus.gif交替)并根据该行是否具有"隐藏"类隐藏/显示其下方的行.(如果它有一类"隐藏"则显示它,如果它没有"隐藏"类则隐藏).我可以灵活地更改标记中的ID和类.

谢谢

表行

  
  Data1Data2Data3


   
  Data4Data5Data6

dbrien.. 18

您不需要show和hide标签:

$(document).ready(function(){   
    $('.expand').click(function() {
        if( $(this).hasClass('hidden') )
            $('img', this).attr("src", "plus.jpg");
        else 
            $('img', this).attr("src", "minus.jpg");

        $(this).toggleClass('hidden');
        $(this).parent().next().toggle();
    });
});

编辑:好的,我添加了更改图像的代码.这只是一种方法.当隐藏后面的行时,我在expand属性中添加了一个类作为标记,并在显示行时将其删除.

您不需要show和hide标签:

$(document).ready(function(){   
    $('.expand').click(function() {
        if( $(this).hasClass('hidden') )
            $('img', this).attr("src", "plus.jpg");
        else 
            $('img', this).attr("src", "minus.jpg");

        $(this).toggleClass('hidden');
        $(this).parent().next().toggle();
    });
});

编辑:好的,我添加了更改图像的代码.这只是一种方法.当隐藏后面的行时,我在expand属性中添加了一个类作为标记,并在显示行时将其删除.

没有人对三元运营商有任何爱好？:)我理解可读性考虑因素,但出于某种原因,我点击它将其写为:

$(document).ready( function () {
    $(".expand").click(function() {
            $("img",this).attr("src", 
                 $("img",this)
                    .attr("src")=="minus.gif" ? "plus.gif" : "minus.gif"
            );
            $(this).parent().next().toggle();
    });
});

......并且没有任何无关的课程.