單擊特定按鈕時如何顯示div，

Question

這是我的js代碼：

• 我想單擊第一個按鈕來調用一個新類，它起作用，但是，每個按鈕都做同樣的工作。 當我單擊第二個按鈕時，這也會調用一個新的類。請幫助我解決這個問題。

    <script> $(document).ready(function(){ $("button").click(function(){ /*button click event*/ $(".new").toggle(); /*new class calling */ }); }); </script> 

  這是我的html代碼：

   <button>first</button><br> <button>second</button><br> <button>third</button><br> <div class="new" style = "display: none;">hi.</div> <!--i need to call only this class--> <div class="old"><a href="www.google.com">hello.</a></div> 

Answer 1

您必須為該特定按鈕設置一個ID，然后使用ID將點擊事件處理程序附加到該特定按鈕。 這是代碼。

<button id ='myBtn' >first</button><br> 

 $("#myBtn").click(function(){      /*button click event*/
$(".new").toggle();                /*new class calling */
});

Answer 2

您可以使用contains('first') 。

問題是您使用button作為選擇器，將無法理解實際單擊了哪個按鈕。

我建議，為了使jQuery理解，您應該為該元素提供任何特定的ID。

但是，如果要基於DIV中的文本進行操作，則可以使用contains('first') 。

 $(document).ready(function(){ $("button:contains('first')").click(function(){ /*button click event*/ $(".new").toggle(); /*new class calling */ }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>first</button><br> <button>second</button><br> <button>third</button><br> <div class="new" style = "display: none;">hi.</div> <!--i need to call only this class--> <div class="old"><a href="www.google.com">hello.</a></div> 

Answer 3

 $(document).ready(function() { $("button").eq(0).click(function() { /*button click event*/ $(".new").toggle(); /*new class calling */ }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <button>first</button> <br> <button>second</button> <br> <button>third</button> <br> <div class="new" style="display: none;">hi.</div> <!--i need to call only this class--> <div class="old"><a href="www.google.com">hello.</a> </div> 

使用.eq()選擇需要單擊的按鈕

注意：eq（）是基於索引的，從0開始

Answer 4

如果您想單擊第一個按鈕來調用新課程，則可以通過多種方法進行。這里正在檢查單擊的文本以使第一個按鈕單擊

<script>
    $(document).ready(function(){
    $("button").click(function(){      /*button click event*/
    if ($(this).text() == "first" )  $(".new").toggle();                /*new class calling */
    });
  });
</script>

設置id更好

<button id="first">first</button><br>  
<button>second</button><br> 
<button>third</button><br>
<script>
    $(document).ready(function(){
    $("#first").click(function(){      /*specific button click event*/
        $(".new").toggle();                /*new class calling */
    });
  });
</script>

Answer 5

使用$("Button")您指的是Button元素，而不是某個按鈕，因此每個按鈕都將執行相同的操作。 您應該給按鈕指定一個ID，然后根據其ID對其進行調用。
喜歡：

<button id="firstBtn">first</button><br>  
<button id="secondBtn">second</button><br> 
<button id="thirdbtn">third</button><br>

然后使用ID選擇器#調用它們，如下所示： $("#firstBtn").click()..

Answer 6

刪除內聯樣式並使用單獨的CSS類

$(document).ready(function() {
  $("button").click(function() { /*button click event*/
    $(".new").toggleClass('hide'); /*new class calling */
  });
});

的CSS

.hide {
  display:none;
}

JSFIDDLE

Answer 7

給按鈕賦予id，n相應地調用它們，例如

$("#first").click(function(){      
     $(".new").toggle();              
});