jQuery-Button-Klick-Funktion schaltet beide Sektionen um

Question

Wenn ich auf eine dieser beiden Schaltflächen klicke, werden gleichzeitig #hide und .contact p umgeschaltet. Ich habe versucht, eine Klasse zum Selektor ("Schaltfläche") hinzuzufügen.

$(document).ready(function(){ 
    $("#hide").hide(); 
    $("button").click(function(){ 
     $("#hide").slideToggle("display"); 
    }); 

    $("#contact p").hide(); 
    $("button").click(function(){ 
     $("#contact p").slideToggle("display"); 
    }); 
}); 

https://codepen.io/Shalise/pen/BmmEQJ/

Answer 1

Sie fragen $ ("button"), die ein EL ergreift ement. Sie wollen entweder eine Klasse oder eine ID abfragen. Zum Beispiel habe ich eine ID von # btn1 und # btn2 zu zwei Tasten hinzugefügt. Nachfolgend ist eine modifizierte JQuery:

$(document).ready(function(){ 
    $("#hide").hide(); 
    $("#btn1").click(function(){ 
     $("#hide").slideToggle("display"); 
    }); 

    $("#contact p").hide(); 
    $("#btn2").click(function(){ 
     $("#contact p").slideToggle("display"); 
    }); 
}); 

Answer 2

Sie beide Funktionen auf alle Tasten hinzufügen. Aus diesem Grund wurden beide Funktionen ausgelöst, wenn Sie auf eine Schaltfläche klicken.

Wie Sie sagen: In einem class oder ein id die Tasten ihnen auseinander zu halten und nur eine Funktion zu jeder

HTML

<button id="first">First</button> 
<button id="second">Second</button> 

JS

$(document).ready(function(){ 
    $("#hide").hide(); 
    $("button#first").click(function(){ 
    $("#hide").slideToggle("display"); 
    }); 

    $("#contact p").hide(); 
    $("button#second").click(function(){ 
    $("#contact p").slideToggle("display"); 
    }); 
}); 

Schaltfläche hinzufügen

Answer 3

Verwenden Sie separate Klasse oder ID in jeder Schaltfläche. ex: HTML

<button class="button-1">First</button> 
<button class="button-2">Second</button> 

JS:

$(document).ready(function(){ 
    $("#hide").hide(); 
    $("button.button-1").click(function(){ 
     $("#hide").slideToggle("display"); 
    }); 

    $("#contact p").hide(); 
    $("button.button-2").click(function(){ 
    $("#contact p").slideToggle("display"); 
    }); 
}); 

Answer 4

1. Wenn Sie diese Elemente ausblenden möchten, können Sie eine Klasse zum Beispiel eine Klasse hinzufügen = "hidden" und Stil Es wird angezeigt: Keine, anstatt die Methode jQuery hide zu verwenden.

2. Sie verwenden einen allgemeinen Knopfwähler, wenn Sie eine spezifische ID für jeden dieser Knöpfe haben, können Sie sie spezifisch zielen. Hier

3. ist eine gute Ressource für die Verwendung von slideToggle: http://api.jquery.com/slidetoggle/