如何顯示一個div被點擊一個特定的按鈕時，

Question

這是我的js代碼：

• 我想點擊第一個按鈕來調用一個新的類，它的工作原理，但是，每一個 按鈕做同樣的工作。當我點擊第二個按鈕時，這也叫 一個新的class.please幫我解決這個問題。

  <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的按鈕，正因此呼籲那些像

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

Answer 2

你有一個ID設置爲特定的按鈕，然後附上使用ID單擊事件處理程序，以特定的按鈕。這是代碼。

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

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

Answer 3

您可以使用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 4

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

如果你想點擊第一個按鈕來調用一個新的類，你可以通過多種方式。在這裏與點擊文本檢查，以獲得先做按鈕點擊

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

隨着$("Button")你指的是Button元素，而不是一個CE點擊某個按鈕，每個按鈕都會執行相同的操作。你應該給你的按鈕一個ID，然後根據他們的ID打電話給他們。
像：

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

然後用ID選擇#打電話給他們，像這樣：$("#firstBtn").click()..

Answer 7

刪除內聯風格和使用一個單獨的CSS類

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

CSS

.hide { 
    display:none; 
} 

JSFIDDLE