Hide Divs auf Seite laden

Question

Ich versuche herauszufinden, warum ich nicht zwei div Elemente mit jquery verstecken kann, wenn die Seite geladen wird. Wenn eine von zwei Tasten gedrückt wird, möchte ich das entsprechende div anzeigen. Das funktioniert gut, aber ich kann sie nicht verstecken, bevor eine der Tasten gedrückt wird.

Ich habe versucht, $('.gauge1').hide(); am Anfang des Codes zu setzen, aber es stoppt die div erscheint immer. Siehe meine 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

Das Plugin tatsächlich das Vermessen Sachen versucht zu tun und dann lädt er. Also, wenn es anfänglich versteckt ist, wird dies nicht passieren. Es ist besser, es zu verbergen mit visibility oder nur .hide() die Messgeräte nach dem Plugin seine Bit getan hat und nach dem Plug-Lehren gezogen hat, können Sie sie zeigen können:

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

}) ; 

Arbeits Fiddle: https://jsfiddle.net/q3ysrwfm/

Answer 2

Sie versuchen, die Messgeräte zu verbergen, bevor sie initialisiert werden. Bewegen Sie den Sensor Initialisierung auf, dann verstecken Sie die Messgeräte, dh

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

    }) ;