.hide () and .show () not caching properly CSS display property

Note. I found the cause of my problem. See below for more details.

I will be brief. Here is my scenario:

HTML file:

<form id="login">
<label for="editable">i'm a label for editable</label>
<input id="editable" type="text" />
</form>

CSS file:

#login label { display: block }

JS file:

$(document).ready(function() {
  $('#login label').hide().show();
});

The desired behavior is to show the element again with the same CSS ( display: block) properties , but in the DOM, it seems that the element labelgets other (maybe by default?) Units (in this case display: inline). Note. I checked the HTML and CSS files. All is correct. The problem is in the javascript file.

Take a look at the jQuery API docs regarding the method .hide():

Without parameters, the .hide () method is the easiest way to hide an element:

$ ('target.) Hide () ;.

. .css('display', 'none'), , jQuery, , inline, , .

jQuery API docs .show():

.show() - :

$( '.') ();.

. .css('display', 'block'), , , . inline, , .

- ? ? ?

.

CSS, JS .

+3
4

CSS, JS .

+1

hide() show() CSS .

display:none , . CSS, .

+1

FF3.6, IE8, Safari5, Chrome OPERA10

http://www.jsfiddle.net/kjwxu/

$(document).ready(function() {
  $('#login label').hide().show("fast", function() {$(this).attr("display", "block")});
});

, , "" 1 ( 1 )

http://www.jsfiddle.net/kjwxu/3/

0

, , , .

CSS

#login label { display: block }
#login label.hidden { display: none }

JS

$('#login label').addClass('hidden').removeClass('hidden');

: , , CSS .

0

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


All Articles