发表新帖
发表新帖

How to hide elements with jQuery before they get rendered?

后端 未结
关注
12 1304
北恋
北恋 2020-12-13 08:51

I want to generate html layout with areas (divs, spans) that can be shown/hidden conditionally. These areas are hidden by default.

If I call .hide() method with jque

相关标签:
12条回答
  • 难免孤独
    2020-12-13 09:11

    There's absolutely nothing wrong with setting an intial display property of an element, especially if you encapsulate it in a css class.

    0 讨论(0)
  • 自闭症患者
    2020-12-13 09:11

    you can apply "display: none" in a CSS class.

    Because the order which a browser have to read some HTML code in order for the JavaScript to find the Element. You have to mark the element hidden, as the browser reads your HTML.

    How ever you can also insert the HTML in your JavaScript, and you can call hide before it is rendered.

    0 讨论(0)
  • 时光取名叫无心
    2020-12-13 09:11

    There are many answers, you can use the show() method and code the condition to show or hide. Here is the sample code show_hide when rendering is complete

      <div id="banner-message">
  <p id="hello">Hello World!!!!!</p>
  <input id="statusconf" value="" type="checkbox">Show hello world text when i click this check box
  <button>Change color</button>
</div>

    // find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})

//Set this up as part of document ready if you wish
//$(document).ready(function(e) {

    $("#statusconf").show(function(e) {
            if ($("#statusconf").is(':checked') === false) {
                $('#hello').hide();
            } else {
        $("#hello").show();
      }
  });

    $("#statusconf").on("click", function(e) {
    if ($("#statusconf").is(':checked') === false) {
                $('#hello').hide();
            } else {
        $("#hello").show();
      }
  });

//});
    0 讨论(0)
  • 暗喜
    2020-12-13 09:13

    @Andrew,

    I know the answer has already been accepted, but using display: none; will be a nightmare to users without Javascript.

    Using inline Javascript, you can hide an element without it ever blinking. Users without Javascript will still be able to see it.

    Consider a few divs that should be hidden when the page loads.

    <head>
    <script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
    <div id="hide-me">
        ... some content ...
    </div>
    <script type="text/javascript">
        $("#hide-me").hide();
    </script>

    <div id="hide-me-too">
        ... some content ...
    </div>
    <script type="text/javascript">
        $("#hide-me-too").hide();
    </script>
</body>

    The inline Javascript will run as soon as the element is rendered, thus hiding it from the user.

    0 讨论(0)
  • 不思量自难忘°
    2020-12-13 09:18

    After some time of thinking I've got the idea to the following solution. Compared to my other solution I have reduced it to the essential part (and used this to add a class by JS):

    <html>
<head>
    <style>
        /* This could be also part of an css file: */
        .container-with-hidden-elements .element {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <script>
            document.getElementsByClassName('container')[0]
                    .className += ' container-with-hidden-elements';
        </script>

        <div class="element">Content that should be initially hidden if possible.</div>
    </div>
</body>
</html>

    The script tag gets executed immediately and adds a class to a container. Within this container there are some nested elements that get now hidden because the container has got the special class and there is a CSS rule that now has an effect.

    Again, this happens before the remaining html gets processed (prevents blinking). And also, if JS is disabled, all the elements are visibly by default - what may be called Progressive enhancement.

    Not sure if this works in every browser. But IMO it would be simple and neat solution.

    0 讨论(0)
  • 予麋鹿
    2020-12-13 09:18

    What I always do is create an empty div. And if some data inside that component needs to be shown, I asynchronously load data (i.e. html) into it using $.ajax().

    No need for an extra lib.

    0 讨论(0)
 看不清?
提交回复
热议问题