1

私はJQueryが初めてで、ゆっくりと混乱していますが、これには本当に困惑しています:(

複数の「詳細情報」ボタンがあるページがあり、クリックすると情報が切り替わります（ボタンごとに異なります）

ただし、2 番目の「詳細」ボタンをクリックすると、最初のボタンが複数回 (「詳細」ボタンの数.

提案されたさまざまな解決策を試しましたが、適切に機能するようには見えません:)

これは私が現時点で持っているコードです:

http://pastebin.com/SSxc09Gy

どんな助けも驚くべきものであり、感謝して受け取ります!

前もって感謝します ：）

4

1 に答える 1

1

これは、ペーストビンの例の少しクリーンアップされたバージョンです。

クリーンアップされたバージョンでは、スタイルと JavaScript の重複した減速と、テーブル内の html/head マークアップが削除されます。このデータを別のソースからロードしていますか? html/head/body セクションがあるのはそのためですか?

マークアップの 2 番目のセットでは、href 属性をボタンの #collapse2 に更新し、他の情報を含む div の id を更新する必要があるようです。使用する JavaScript は、その href 属性を探して、展開する div を決定します。

次のようになります。

<section class="round-border">
    <div>
        <button href="#collapse2" class="nav-toggle">More Information</button>
    </div>
    <div id="collapse2" style="display:none">
        <div id="justify" style="width:574px;text-align:left">
            <p>Second lot of information</p>
        </div>
    </div>
</section>

一意の折りたたみ ID に縛られる必要のない方法で、マークアップと JavaScript を変更することもできます。

マークアップをそのように変更する場合、div id「collapse1」を「collapse」のクラスにすることで、javascript を取得して dom を調べ、jQuery の.closestを使用して切り替えられるボタンと div を含む要素を見つけることができます。 ()メソッド、次に.find()を使用して折りたたみ可能な div 要素を見つけます。これはまた、jQuery のメソッド チェーンがいかに優れているかをよく示しています。

新しいマークアップ

<td colspan="4" style="text-align:right;">
    <section class="round-border">
        <div>
            <button class="nav-toggle">More Information</button>
        </div>
        <div class="collapse hide">
            <div id="justify" style="width:574px;text-align:left">
                <p>Second lot of information</p>
            </div>
        </div>
    </section>
</td>

新しいjs

$(document).ready(function () {
    $('.nav-toggle').click(function () {
        $(this).closest('.round-border').find('.collapse').slideToggle();

        var text = $(this).text();
        $(this).text(text == "More Information" ? "Hide" : "More Information");
    });
});

代替ソリューションを使用したjsfiddle

この方法は、jQuery が dom をより多く検索するため、より計算集約的であることに注意してください。多くの要素を持たない少数の場所でのみこれを行っている場合、余分な計算によるマイナスは目立たないはずです。

于 2013-06-01T20:50:13.773 に答える