jquery - 在页面加载时隐藏 div

Question

我试图弄清楚为什么在页面加载时我无法使用 jquery 隐藏两个 div 元素。当按下两个按钮之一时，我希望显示相关的 div。这工作正常，但在按下任一按钮之前我似乎无法隐藏它们。

我尝试将 $('.gauge1').hide(); 放在代码开头，但它会阻止 div 出现。看我的fiddle here

$(document).ready(function() {

  //How to ihide them both on page load?



  $("#button1").on("click", function() {
    $('.gauge1').fadeIn();
    $('.gauge2').hide();
  });

  $("#button2").on("click", function() {
    $('.gauge2').fadeIn();
    $('.gauge1').hide();
  });


  var d = new JustGage({
    id: "gauge1",
    value: 67,
    min: 0,
    max: 100,
    title: "Visitors"
  });
  var b = new JustGage({
    id: "gauge2",
    value: 91,
    min: 0,
    max: 100,
    title: "Visitors"
  });
});

<script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script>

<h2>
Choose Gage
</h2>

<button id="button1">Gauge 1</button>
<button id="button2">Gauge 2</button>
<div class="gauge1">
  <h2>
Gauge 1
</h2>
  <div id="gauge1" class="200x160px"></div>
</div>
<div class="gauge2">
  <h2>
Gauge 2
</h2>
  <div id="gauge2" class="200x160px"></div>
</div>

Answer 1

该插件实际上尝试执行测量操作，然后加载。因此，当最初隐藏时，这种情况不会发生。最好在插件完成其工作后使用 visibility 或仅 .hide() 隐藏仪表，并且在插件绘制仪表后，您可以显示它们:

$( document ).ready( function() {

  $( "#button1" ).on( "click" , function() { 
    $('.gauge1').fadeIn();
    $('.gauge2').hide();
  } ) ;

  $( "#button2" ).on( "click" , function() { 
    $('.gauge2').fadeIn();
    $('.gauge1').hide();
  } ) ;


  var d = new JustGage({
    id: "gauge1",
    value: 67,
    min: 0,
    max: 100,
    title: "Visitors"
  });
  var b = new JustGage({
    id: "gauge2",
    value: 91,
    min: 0,
    max: 100,
    title: "Visitors"
  });

  // Add the hide script after the gauges have been drawn.
  $('.gauge1, .gauge2').hide();

} ) ;

工作 fiddle :https://jsfiddle.net/q3ysrwfm/