All geek questions in one place

How to use jquery val () correctly to match CSS selectors

I have a form with some inputs and CSS attached to them that uses an attribute value selector to change the background color of the input depending on the value.

Example

<!DOCTYPE html>
<html>
  <head><style>
    input[value="foo"] { background-color: red; }
  </style></head>
  <body>
    <form>
     <input value="foo" />
     <button/>
    </form>
  </body>
</html>

If I use fooas the value at boot, as in the code, the field will be red at boot, but if I change it, it will remain red. The same thing, if I change the input value to foo, it will not change the background color.

Similarly, if I use .val()in jQuery. Apparently, in these cases the "dynamic" value changes, while CSS refers to the "static" value.

$('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
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"..., .

$("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 . , .

+4
input[value="foo"]

input, value, foo.

foo input , , input, value="foo".

jQuery val() - , , $('input[value="bar"]') , input / .

+1

,

$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" />
0

, , , HTML, , HTML , ( , ). , , . , .

You can perform the following experiment. In Chrome, if you press Ctrl + J (sorry, I don't know what combos are for other browsers), you can open the javascript console. Enter there

$("input[value=foo]").val("bar");

Then go to the DOM explorer and note that the value of the attribute has not changed. To change it you need to use the function

$("input[value=foo]").attr("value","bar");

Then you can achieve what you are looking for.

0
source

Source: https://habr.com/ru/post/1694298/

More articles:


All Articles