Hide the div element flash processing when the webpage is refreshed

   When using js to initialize and hide page elements, after jumping to the page, a hidden div block flashes when the page is displayed. The reason is that the div block is in the displayed state, and the jqurey.hide() function is hidden after the page is loaded, so As a result, elements that should have been hidden when the page was initialized flashed at this time, resulting in a poor customer experience.

$(function () {
        $("#test1").hide();
        $("#test2").hide();
        var type=$("#type").val();
        if(type=="数值"){
          $("#test1").show();
          $("#test2").hide();
          }else{
          $("#test2").show();
          $("#test1").hide();
        }
    })

 

<input type="hidden"  id="type" value="" />

<div id="test1">
    <input type="text" id="test1" name="test1" placeholder="数值"/>
</div>
<div id="test2">
    <textarea cols="100" rows="200" id="test2" name="test2"placeholder="文本"></textarea>
</div>

 The above code causes the hidden div block to flash on page load, which starts various attempts. . . . .

And eggs. . . After various attempts, the easiest method was finally ignored.

So as to do processing in css

    #test1{display:none;}
    #test2{display:none;}

 This actually solved it. . . . . What the hell. . Keep this as a note, as a wake-up call!

Various situations are different, this method is only one of the situations encountered in my work, it is purely for self-entertainment!