Question

我试图找出为什么在页面加载时我无法用jquery隐藏两个div元素。当按下两个按钮中的一个时，我想要显示相关的div。这样可以正常工作，但在按下任一按钮之前，我似乎无法隐藏它们。

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

＆＃13;

$(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"
  });
});

＆＃13;

<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>

＆＃13;

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();

} ) ;

工作小提琴：https://jsfiddle.net/q3ysrwfm/

Answer 2

你试图在它们初始化之前隐藏仪表。将仪表初始化向上移动，然后隐藏仪表，即

$( document ).ready( function() {

 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"
  });

$('.gauge1, .gauge2').hide();

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

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

  } ) ;

在页面加载时隐藏div

2 个答案: