Question

现在我有以下Jquery，当点击一个表行时，它会关闭它下面的行。

<script type="text/javascript">
$(function () {
    $("tr.spaceUnder").hide();
    $('tr:not(.spaceUnder)').click(function () {
        $(this).nextUntil('tr:not(.spaceUnder)').toggle();
    });
});

现在我想要的是当我点击切换其下行的行时，显示一个打开/关闭图标或+/-无论如何。

这就是具有切换功能的行。

<tr class="countryRow categoryHeader">
        <td colspan="3" class="">
            <span class="listItemHeader">
                <%#((Item)Container.DataItem)["Name"]%>
            </span>
        </td>
        <td>
            <a href="#" style="float: right;"><img width="20"  src="/Images/sBackTopPic.png"></a>
        </td>
    </tr>

所以在切换时我想改变行中第二个td的href上的css类，所以在初始加载时显示关闭图标，然后单击打开图标..然后再次单击关闭图标。所以我想知道如何用我当前的切换逻辑在我的href上添加css类。

Answer 1

令人困惑的是你正在尝试做什么。但是在你的点击功能下面它会检查锚点以查看它是否有第一类，如果是，则删除该类并添加另一个类。如果没有相反的话。

$(function () {
        $("tr.spaceUnder").hide();
        $('tr:not(.spaceUnder)').click(function () {
            $(this).nextUntil('tr:not(.spaceUnder)').toggle();
            if($('a', this).hasClass("class-one"))
            {
              $('a', this).removeClass("class-one");
              $('a', this).addClass("class-two");
            {
            else
            {
              $('a', this).removeClass("class-two");
              $('a', this).addClass("class-one");
            }
        });
    });

切换表格行上的Jquery更改图标

1 个答案: