jQueryボタンクリック機能は両方のセクションを切り替える

Question

これらの2つのボタンの1つをクリックすると、#hideと.contact pの両方を同時に切り替えます。私は（ "ボタン"）セレクターにクラスを追加しようとしました。

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

あなたはelをつかむ$（ "button"）をクエリしていますement。クラスまたはIDを照会するかどうかを指定します。たとえば、＃btn1と＃btn2のIDをそれぞれ2つのボタンに追加しました。以下はすべてのボタンで別のクラスまたはIDを使用して変更されたJQueryです：

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

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

Answer 2

あなたはすべてのボタンに両方の機能を追加します。そのため、両方の機能が、ボタンをクリックしたときにトリガされる理由です。

あなたが言うように：JSを離れてそれらを伝えるためにボタンにclassまたはidを追加し、唯一の各ボタンに一つの機能を追加し

HTML

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

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

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

Answer 3

例： 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. あなたはそれらの要素を非表示にしたい場合は、例えば、クラス= "隠された" とスタイルをクラスを追加することができますjQuery hideメソッドを使用する代わりにnone：noneを表示します。

2. 一般的なボタンセレクターを使用していますが、それぞれのボタンに固有のIDがある場合は、具体的にターゲティングできます。ここで

3. はslideToggleを使用するための優れたリソースです：http://api.jquery.com/slidetoggle/