4

jquery 1.3.2から1.6.4にアップグレードしたところ、既存のコードの一部が機能していないことがわかりました-

  1. 何かを無効にする-

    $(selector).attr("disabled","");

  2. ラジオボタンがチェックされているかどうかを確認する-

    if($(selector).attr('checked'))

バージョンリリース1.4、1.5、および1.6の下位互換性を確認したところ、問題＃2のみが言及されていましたが、上記の問題＃1については明示的に言及されていませんでした。そのため、問題1のように、既存のコードでさらに多くの問題を見つけることができるのではないかと心配しています。http://blog.jquery.com/2011/05/03/jquery-16-released/の「データ属性のケースマッピング」セクションで何かを見逃したと思います。誰かが同じことを説明してもらえますか？

ソース-jQuery1.3.2からjQuery1.5（または1.4）へのアップグレード

アップデート

に適切に置き換えることattrとはまだ少し混乱していpropます。.prop（）と.attr（）およびその他のいくつかの質問を読みました。私がこれまで読んだところはどこでも、ほとんどの場合、そうする必要があると書かれています。しかし、それでは少数派のケースはどれですか？誰かがいくつかのコード例や状況を与えることができますか？既存のコードでそのようなケースを見つけるにはどうすればよいですか？https://stackoverflow.com/a/6057122/351903も読んだことがあります 。

本当に注意する必要があるのは、アプリケーション全体で同じプロパティに対してこれらの使用法を混在させないことです。

現在正常に機能しているそのような回線の場合、attrに置き換える必要がありますか？prop

$(selector).attr("id")

更新＃2
既存のコードに次のような行があるとします（これはUIウィジェットの動作または状態に直接影響すると思います）が、現在、その要素がチェックされているかどうかを確認するチェックはありません-

これはそこにあります 

$(selector).attr("checked","checked"); //setting

しかし、これはありません

if($(selector).attr("checked")) //checking

attr設定が機能しているのにprop、設定コードでに置き換える必要がありますか？

アップデート＃3
UIウィジェットのプロパティに直接影響する属性のリストを取得できる場所はありますか？attrをpropに置き換える属性を決定するのにまだ混乱があります。このjqueryバージョンに不慣れな人は他に同じように感じますか、それとも私は1人だけですか：D？

アップデート＃4
これら2つのバージョン（1.3.2から1.6.4）の間のどこかで、jqueryが要素の選択をより厳密にしたようです。

詳細
モジュールには、次のHTMLがあります-

<div id="60table">
    <div>
        <input type="CHECKBOX" id="60_1" value="1" name="data[reportsInfo][Campaign][2752]">
        <label for="60_1">23 apr new campaign 1</label>
    </div>
    <div>
        <input type="CHECKBOX" id="60_2" value="1" name="data[reportsInfo][Campaign][2753]">
        <label for="60_2">23 apr new campaign 2</label>
    </div>
    <div>
        <input type="CHECKBOX" id="60_3" value="1" name="data[reportsInfo][Campaign][2707]">
        <label for="60_3">2nd camp added</label>
    </div>
</div>

jquery 1.3.2では、以下は実際の入力数を返しました-

$("#60table INPUT[type='checkbox']").length

ただし、jquery 1.6.4では、上記は0を返します（入力の位置は＃60table> div> inputのようであり、＃60tableのすぐ下ではないことに注意してください）。私は $("#60table").find("INPUT[type='checkbox']").length正しい番号を取得するためにやらなければなりません。

このため、次の既存のコードは、attrをprop-に置き換えても、アップグレード後に機能しなくなりました。

$("#60table INPUT[type='checkbox']").attr('checked', $("#60").attr("checked")); //I replaced the attr by prop here

そのため、アップグレード後に古いコードが機能しなくなるという新しい問題がまだ発生しています。

賞金を出す
理由-

  • 要素セレクターロジックが機能しなくなった-機能 していないコードが他にもあるかどうかはわかりません。Update 4を例にとると、入力の位置が、の場合、の#60table > div > inputように選択するのは正しくありませんでした$("#60table INPUT[type='checkbox']")。もしそうなら、壊れているかもしれない私のプロジェクトにあるかもしれない他のいくつかの一般的な間違いがありますか？

  • attrをpropに置き換える場所のより良い説明-attrの代わりにpropを使用する場合と、いくつかの例を使用して、より明確に区別する必要があります。ジョンの答えによると-

UIウィジェットの動作や状態に直接影響する場合は、propを使用してください。それ以外の場合はattrを使用します。

UIウィジェットのプロパティに直接影響する属性のリストはどこで入手できますか

4

2 に答える 2

9

この問題は、データ属性のケースマッピングとはまったく関係ありません。これは、単に属性/プロパティAPIの進化によるものです。

これまで、jQueryはプロパティと属性の間に明確な線を引きませんでした。一般に、DOM属性は、マークアップのvalue属性など、ドキュメントから取得されたDOM情報の状態を表します。DOMプロパティは、ドキュメントの動的な状態を表します。たとえば、ユーザーが上記の入力要素をクリックしてdefと入力した場合、.prop（ "value"）はabcdefですが、.attr（ "value"）はabcのままです。

ほとんどの場合、ブラウザは属性値をプロパティの開始値として扱いますが、checkedやdisabledなどのブール属性には通常とは異なるセマンティクスがあります。

他の関連する重大な変更が欠落している場合は、コードを検索して使用法を検索し、適切attrに置き換えるだけで十分です。ほとんどの場合に使用される傾向があることを考えると、通常、呼び出しの大部分を置き換える必要がありますprop。attr

更新：適切に定義しましょう。

重要なアイデアは、要素にはHTML属性があるということです：<input name="foo" disabled>属性idとdisabled;があります。id値がありますが、ありdisabledません。これらの属性の1つは、ブラウザーがこの要素を表すためにレンダリングするUIウィジェットのプロパティに直接影響します（デスクトップアプリコントロールが無効であるという意味で、入力ボックスは無効になっています）。したがって、経験則は次のとおりです。

UIウィジェットの動作や状態に直接影響する場合は、prop;を使用してください。それ以外の場合はを使用しますattr。

あなたが言及した例では、idは要素の振る舞いや状態に直接影響を与えない抽象的な量です。したがって、引き続き使用する必要がありますattr。

アップデート2：

設定が機能している場合でも、設定コードでattrをpropに置き換える必要がありますか？

はい、jQueryのドキュメントにそう書かれているのでそうすべきです。そして、質問の前半で述べたように、混合するpropとattr問題のある動作につながる可能性があります。

アップデート3：

UIウィジェットのプロパティに直接影響する属性のリストを取得できる場所はありますか？attrをpropに置き換える属性を決定するのにまだ混乱があります。

あまり。ここで適用される経験則は、何かがブール値である場合、propそれにアクセスする正しい方法である可能性が最も高いということです。

アップデート4：

これら2つのバージョン（1.3.2から1.6.4）の間のどこかで、jqueryが要素の選択をより厳密にしたように見えます。

セレクターから一致する要素を解決するのは実際にはSizzleです（ jQueryにはSizzleが組み込まれています）。どのような変更が変更された動作の原因であるかはわかりませんが、犯人はid数字で始まるあなたです。これは有効なHTML4.01ではありませんが、何らかの理由でSizzleでも違いが生じます。id回避策は簡単です。数字で始めないでください。

セレクターが形式の特殊なケースでは、jQueryがSizzleを呼び出す代わりに直接呼び出すため、発見した他の回避策（セレクターを2つに分割して使用する.find）は有効です。#id getElementById

于 2012-04-17T07:03:19.363 に答える
1

アップデート＃4に答えるには：

ID属性は数字で始めてはいけません

動作する理由は、抗議の下で、通常ブラウザで動作するように$('#60table')最適化されたjQuery内にあるためです:)document.getElementById('#60table')

ただし、Sizzleエンジンなどの組み合わせ式の使用を開始すると$('#60table input[...]')、クエリに厳密なルールが使用されます。

お役に立てば幸いです。

于 2012-05-15T16:28:46.017 に答える