2

prop と attr の全体像は理解できたと思っていましたが、その理解に疑問を抱くケースに遭遇しました。

テーブルを生成するバックボーン ビューのテストを作成していましたが、テストでは基本的に次のことが行われました。

// assert that $table.find('input[value="foo"]').length == 2
$table.find('input[value="foo"]:first').val('bar');
// assert that $table.find('input[value="foo"]').length == 1

奇妙な部分は、その 2 番目のアサーションが失敗したことです。何度も頭をぶつけた後、私はついに試しました：

// assert that $table.find('input[value="foo"]').length == 2
$table.find('input[value="foo"]:first').attr('value', 'bar');
// assert that $table.find('input[value="foo"]').length == 1

見よ、私のテストは合格した。

さて、関連するすべてのコードでフィドルを投稿できたらいいのにと思いますが、多すぎます (テーブル ビューだけで 685 行です)。あなたのコード」。そして、私が理解しようとしているのは、なぜ次のような場合があるのでしょうか?

$table.find('input[value="foo"]:first').val('bar');

何もしませんが、次のことを行います。

$table.find('input[value="foo"]:first').attr('value', 'bar');

期待どおりに動作しますか？

PS私.val('bar')は何もしなかったと言うべきではありません。後で行った場合.val()、値が変更されたことが示されます...しかし、実際の要素を確認したり、新しいセレクターを使用したり、そのようなものを使用したりすると、val実際には何も変更されていないことが明らかになりました。これは私をさらに混乱させるだけです。

4

2 に答える 2

5

簡単な例で、物事に光を当てる必要があります。このHTMLから始めると仮定します。

<input id="t1">
<input id="t2">

次に、このJavaScriptを実行します。

$('#t1').val('pancakes');
$('#t2').attr('value', 'pancakes');

視覚的には、両方とも<input>同じように見えます、両方とも言うでしょうpancakes。ただし、基になるDOM要素を見ると、次のことがわかります。

<input id="t1">
<input id="t2" value="pancakes">

したがってval、多かれ少なかれ使用すると、マウスとキーボードを使用してフォーム要素をいじるのをシミュレートします。これにより、基になる要素が変更されることはありません。ただし、を呼び出すattrと、基になる要素が変更#t2され、実際の本格的なvalue属性になります（理由を知りたい場合は、 adeneoの回答を参照してください）。

なぜ違いが重要なのですか？属性セレクターを使用していることに気付いたので、これをざっと見てみる価値があります。

$('input[value=pancakes]').length

これは、探している値を持つaは言うまでもなく、sの11つだけが属性を持っているためです。<input>valuevalue

問題はそれではありません：

$table.find('input[value="foo"]:first').val('bar');

何もしません。問題は、属性に対して何もしvalないため、属性セレクターが認識できることを何もしないことです。

上記の簡単なデモ、コンソールを開いて興味深いものを見てください：http: //jsfiddle.net/ambiguous/PNtKk/

于 2013-03-20T02:10:21.777 に答える
3

val()プロパティを直接変更し、コンソールには表示されませんが、コンソールに表示されるようattr()に属性をネイティブで変更しますsetAttribute()。

val()要素の値を設定する適切な方法です。

于 2013-03-20T01:17:42.297 に答える