0

現在、次の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>

したがって、トグルで、行の2番目のtdのahrefのcssクラスを変更したいので、最初のロードで閉じたアイコンを表示し、次に開いたアイコンをクリックします。次に、閉じたアイコンをもう一度クリックします。そのため、現在のトグルロジックを使用してhrefにcssクラスを追加するにはどうすればよいか疑問に思いました。

4

1 に答える 1

0

あなたがやろうとしていることは正確に混乱しています。ただし、クリック関数の下では、アンカーをチェックして、クラス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");
            }
        });
    });
于 2013-01-16T18:34:21.780 に答える