使用JQuery查找下一个表行

Question

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

谢谢

表行

<tr>
  <td class="expand"><img src="plus.gif"/></td>
  <td>Data1</td><td>Data2</td><td>Data3</td>
</tr>
<tr class="show hide">
  <td> </td>
  <td>Data4</td><td>Data5</td><td>Data6</td>
</tr>

Answer 1

您不需要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属性中添加了一个类作为标记,并在显示行时将其删除.

Answer 2

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

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

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