如何正確使用jquery val（）來匹配CSS選擇器
[英]How to properly use jquery val() to match CSS selectors
問題描述
我有一個帶有一些輸入和附加CSS的表單，它使用屬性值選擇器根據值更改輸入的背景顏色。
例
<!DOCTYPE html>
<html>
<head><style>
input[value="foo"] { background-color: red; }
</style></head>
<body>
<form>
<input value="foo" />
<button/>
</form>
</body>
</html>
如果我在加載時使用foo作為值，就像在代碼中一樣，加載時字段將為紅色，但如果我更改它，它將保持紅色。 同樣的事情，如果我將輸入的值更改為foo ，它將不會更改背景顏色。
類似地，如果我在jQuery中使用.val() 。 顯然，在這些情況下，“動態”值會發生變化，而CSS則指的是“靜態”值。
$('button').on('click', function(ev) {
ev.preventDefault();
$('input[value="foo"]').val('bar');
// $('input[value="bar"]').val('baz'); // nothing is found
});
我希望這段代碼可以將字段從foo更改為bar ，然后將bar更改為baz ，但是在第二個選擇器中找不到該字段。
如果我使用attr方法，事情似乎有效，但在jQuery文檔中（以及SO上的許多答案）， val是要走的路。
為什么會這樣，為什么我要使用val()呢？
4 個解決方案
解決方案1
4 已采納
“為什么會......”
這是一個屬性選擇器，更新.value屬性時屬性不會更改，因此您需要顯式更改屬性。
$('button').on('click', function(ev) { ev.preventDefault(); $('input[value="foo"]').val('bar').attr("value", "bar"); $('input[value="bar"]').val('baz'); });
input[value="foo"] { background-color: red; } input[value="bar"] { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <form> <input value="foo" /> <button/> </form>
但是，當用戶更改值時，除非您連接.on("input"...處理程序以保持屬性與屬性同步），否則這.on("input"... 。
$("input").on("input", function() { this.setAttribute("value", this.value); });
input[value="foo"] { background-color: red; } input[value="bar"] { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <form> Change the value to "bar" <input value="foo" /> </form>
“......為什么我要使用
val()呢？”
只需通過屬性保留原始值即可獲取和設置值。
要求它們同步並不是那么常見。 按值選擇DOM有點像文本內容的DOM選擇。 它不是經常需要的，有時候有更好的方法來解決問題。
解決方案2
1 2018-03-01 15:07:26
input[value="foo"]
選擇具有等於foo的顯式屬性 value input元素。
將foo鍵入input元素不會創建此類屬性 ，也不會鍵入任何其他內容刪除具有屬性value="foo"的input的屬性。
jQuery的val()是讀取值的正確方法，問題是你的selector $('input[value="bar"]')找不到任何東西，因為設置input的value 屬性不會改變/添加屬性 。
解決方案3
0 2018-03-01 15:14:14
我希望這個片段解釋得很好
$input = $('input') console.log('val:', $input.val()) console.log('attr:', $input.attr('value')) // attr will get the attribute from html not the *dynamic* value has been set $input.val('bar') console.log('val:', $input.val()) console.log('attr:', $input.attr('value')) // same here when you use val you change the property value of input not the attribute $input.attr('value', 'bazzz') console.log('val:', $input.val()) console.log('attr:', $input.attr('value'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input value="foo" />
解決方案4
0 2018-03-01 15:21:15
對於那些了解HTML技術性的人來說，我當然是錯的，但是出於我自己的直覺，我總是想到任何作為屬性進入HTML文件的內容以及之后作為屬性的任何值（我猜你可以稱之為運行時）值）。 如果你想要更深入的了解，你需要谷歌它，因為我只是沒有這樣的知識:)請記住，我的總結在這里非常簡單。
您可以進行以下實驗。 在Chrome上，如果按Ctrl + J（抱歉，我不知道其他瀏覽器的組合是什么），您可以彈出javascript控制台。 在那里，輸入
$("input[value=foo]").val("bar");
然后轉到DOM資源管理器，注意value 屬性沒有改變。 要更改它，您需要使用該功能
$("input[value=foo]").attr("value","bar");
然后，您將能夠實現您正在尋找的東西。
如何使用 jquery val()
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.