1

私は大きなアプリケーションをかなり古い 1.11.2 から最新の jQuery 3.0 にアップグレードすることに取り組んでいます。私たちの機能の一部を壊すかなり微妙な変更を見つけました:

いくつかの複雑なウィジェットをインスタンス化するとき、最初は css を使用して一部の要素を非表示にします (表示なし)。次に、show/hide を使用して要素を表示します。

ただし、表示/非表示の呼び出しは、ウィジェットが DOM にアタッチされる前に発生する可能性があります。1.11.2 では要素がアタッチされていない場合、表示/非表示は正常に機能していましたが、3.0.0 では機能しません。

デモ：

.tabCompositeSearchWidget-ClearButton
{
    /* Clear button is initially hidden */
    display: none;
}

var e = document.createElement('div');
$(e).addClass('tabCompositeSearchWidget-ClearButton');
$(e).text('blah');
$(e).show();
$('#root').append($(e));
alert($(e).is(":visible"));

古いバージョンでは要素が表示され、アラートは と表示されますがtrue、最新のバージョンでは表示されず、アラートは表示されますfalse

そのような使用法をすべて見つけるのは難しいので、それを修正する最善の方法に興味があります: ここで最善の修正は何ですか? 古い方法で動作するように jquery.js ファイルを手動で変更しますか? (本当はやりたくない)

更新: 1 回限りのケースの修正は簡単です。しかし、そのような呼び出しが潜在的に数十あり、それらすべてを見つけて修正するには多大な労力が必要であり、効果的ではありません。

4

2 に答える 2

3

jqueryブログの関連セクションは次のとおりです。

「スタイルシートに display: none に設定されている要素がある場合、.show() メソッドはそれをオーバーライドしなくなります。したがって、jQuery 3.0 に移行するための最も重要なルールは次のとおりです。表示のデフォルト: none を使用してから、.show() または .slideDown() や .fadeIn() などの要素を表示する任意のメソッドを使用して、表示できるようにします。

要素をデフォルトで非表示にする必要がある場合、最善の方法は、「hidden」などのクラス名を要素に追加し、そのクラスをスタイルシートで display: none に定義することです。その後、jQuery の .addClass() および .removeClass() メソッドを使用してそのクラスを追加または削除し、可視性を制御できます。または、要素がページに表示される前に、要素に対して .ready() ハンドラで .hide() を呼び出すことができます。または、本当にスタイルシートのデフォルトを保持する必要がある場合は、.css("display", "block") (または適切な表示値) を使用してスタイルシートをオーバーライドできます。"

https://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/

于 2016-07-11T21:59:23.157 に答える