2

Web サイトを jQuery 1.10 に更新したいのですが、非推奨の関数を使用していますtoggle()。

この関数を初めて動作させるのに苦労したことを覚えていtoggle()ます。すべてのコードを変更せずに を置き換えることができる関数は存在しますか?

私は jQuery の専門家ではありません。助けていただければ幸いです。

CSS:

fieldset.collapsed * {
    display: none;
}

fieldset.collapsed h2, fieldset.collapsed {
    display: block !important;
}

fieldset.collapsed h2 {
    background-image: url(../img/nav-bg.gif);
    background-position: bottom left;
    color: #999;
}

fieldset.collapsed .collapse-toggle {
    background: transparent;
    display: inline !important;
}

jquery:

var sPath=window.location.pathname;
(function ($) {
    $(document).ready(function () {     
        function show () { // Show
            $(this).text(gettext("Hide"))
                .closest("fieldset")
                .removeClass("collapsed")
                .trigger("show.fieldset", [$(this).attr("id")]);
            window.localStorage.setItem($(this).attr("id"), true);
        }
        function hide () { // Hide
            $(this).text(gettext("Show"))
                .closest("fieldset")
                .addClass("collapsed")
                .trigger("hide.fieldset", [$(this).attr("id")]);
            window.localStorage.removeItem($(this).attr("id"))
            return false;
        }
        // Add anchor tag for Show/Hide link
        $("fieldset.collapse").each(function (i, elem) {
            // Don't hide if fields in this fieldset have errors
            key = 'fieldsetcollapser' + i + sPath;
            if (typeof (window.localStorage) != 'undefined') {
                var item = $(elem)
                .addClass("collapsed")
                .find("h2")
                .first()
                .append(' (<a id=' +
                        key +
                        ' " class="collapse-toggle" href="#">' +
                        gettext("Show") +
                        '</a>)'
                ).find('a');
                if (window.localStorage.getItem(key)) {
                    //alert('show')
                    show.apply(item);
                    $(item).toggle(hide, show);
                }else {
                    if ($("ul.errorlist").length >0) {
                      //alert('yo show')
                      show.apply(item);
                      $(item).toggle(hide, show);
                  }else{
                     $(item).toggle(show, hide);
                     //alert("hide")
                }
                }

            } else {
                throw "window.localStorage, not defined";
            }
        });
    });

EDITED：ここでどのように機能するかを確認してください（jQuery 1.6での作業）

4

2 に答える 2

3

.toggle() 関数が廃止された理由は、まさにこのような混乱のためでした!

何が起こっているかというと、コードが (交互に) 独自の内部 "hide" および "show" 関数を呼び出しているということです。呼び出しはあなたの.toggle(hide,show)ためにそれを処理します。

ただし、 hide() および show() 関数内では、実際には何も隠したり表示したりしていません。あなたがしているのは、 class を追加または削除することです。これは、何かを非表示または表示する場合としない場合があります。

ソリューション

これら 2 つの関数を交互に呼び出す唯一の解決策は、これらの関数のいずれかが呼び出されるたびに「クリック」イベントを変更することです。

show() コードの最後に、次を追加する必要があります。

$(this).one("click", hide);

hide() コードの最後に、以下を追加する必要があります。

$(this).one("click", show);

最後に、.toggle() への呼び出しを次の呼び出しに置き換える必要があります。

$(item).one("click", hide); // replaces $(item).toggle(hide,show);
$(item).one("click", show); // replaces $(item).toggle(show,hide);

.is(":visible") ではないのはなぜですか?

簡単に言えば、追加/削除するクラスは「折りたたまれた」クラスです。このクラスは実際には $(item) を隠しません。このため、 $(this).is(":visible") は常にtrue になります!

明らかに、それはうまくいきません。

ポイントを説明するデモンストレーションを次に示します。

完全にコードで

言葉ではなくコードを読むのが好きな人向け:

function firstEvent() {   // e.g. "hide"
    //First event code
    $(item).one("click", secondEvent); 
}
function secondEvent() {  // e.g. "show"
    //Second event code
    $(item).one("click", firstEvent); 
}

$(item).one("click", firstEvent); // replaces $(item).toggle(firstEvent, secondEvent);
于 2013-08-23T17:47:00.680 に答える
0

インスタンスをifステートメントに置き換えます

$(item).click(function(){
  if ($(this).is(':visible')) {
       $(this).hide();
    }
    else {
        $(this).show();
    }
});

pこれは、要素とを使用して動作する上記のコードのデモですimg。

デモhttp://jsfiddle.net/kevinPHPkevin/8TFFx/

CSS/Jquery を使用して行うこともできます

$('p').click(function(){
  if ($('img').is(':visible')) {
       $('img').css("display","none");
    }
    else {
        $('img').css("display","block");
    }
});
于 2013-08-23T17:34:10.157 に答える