1

Jクエリ:

$(document).ready(function () {
    $('#myfirstDiv').click(function () {
        $('#seconDiv').fadeIn("fast");
    });
    $('#closeBtn').click(function () {
        $('#seconDiv').fadeOut("fast");
    });
});

私のサイトではこれらの関数が複数使用されており、Div と Buttons の ID が異なります。
これらの関数をすべての Div と Button に一般化するにはどうすればよいでしょうか?

4

3 に答える 3

3
  1. ボタン div のクラスを定義する
  2. フェード div のクラスを定義する
  3. ボタンにカスタム属性data-targetを作成するdiv
  4. ボタンにカスタム属性data-actionを作成するdiv
  5. jQuery ですべてのボタン div 要素を検索し (クラスごとに選択)、アクション (show/fadeIn または hide/fadeOut) に従ってターゲットにリンクします。

このように、ボタンや div の数に関係なく、正しく設定されていれば、jQuery はそれらを「自動的に」リンクします。

申し訳ありませんが、今のところコードはありませんが、このアプローチは機能します。

アップデート

このアプローチを実現するのに役立ついくつかのリンク:

于 2012-05-14T15:56:05.037 に答える
3

2 番目の div とそれを閉じるボタンを受け取るプラグインを次に示します。

(function($) {
    $.fn.extend({
        FadeInOut: function(divTwo, closeBtn) {
            return this.each(function() {
                $(this).click(function() {
                    $(divTwo).fadeIn("fast");
                });
                $(closeBtn).click(function() {
                    $(divTwo).fadeOut("fast");
                });
            });
        }
    });
})(jQuery);

デモ

于 2012-05-14T16:08:37.350 に答える
0

これらのフェードインおよびフェードアウト関数を一般化する解決策を見つけました。この例
を見ると、他の例 に役立つかもしれません。


于 2012-05-15T06:01:32.170 に答える