javascript - How to show a div when a particular button is clicked, - Stack Overflow

admin管理员组

文章数量:1026989

This my js code:

• i want to click first button to call a new class,it works but, every button doing same work. when i click second button this also calling a new class.please help me to solve this.

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

  this my html code:

  <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">hello.</a></div>
  

This my js code:

• i want to click first button to call a new class,it works but, every button doing same work. when i click second button this also calling a new class.please help me to solve this.

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

  this my html code:

  <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.">hello.</a></div>
  

• javascript
• jquery
• html

Share Improve this question Follow asked Sep 27, 2016 at 9:41 heart hackerheart hacker 43122 gold badges99 silver badges2222 bronze badges 0

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 1

You have to set an id to that particular button and then attach click event handler to that particular button using id. Here is the code.

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

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

You can use contains('first').

The thing is that your using button as selector, that will not understand which button is clicked actually.

I would remend, To make jQuery understand you should provide any specific id to that element.

But if you want to do it based on the text inside a DIV, you can use contains('first').

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

<script src="https://ajax.googleapis./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.">hello.</a></div>

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

<script src="https://ajax.googleapis./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.">hello.</a>
</div>

use .eq() to select which button you need the click

Note: eq() is index based which starts with 0

With $("Button") you are referring to the Button element and not a certain Button so every button will do the same action. You should give your Buttons an id and then call them based on their Id.
Like:

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

And then call them with the id selector # like so: $("#firstBtn").click()..

Remove the inline style and use a separate css class

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

CSS

.hide {
  display:none;
}

JSFIDDLE

If you want to click first button to call a new class , you can do by many ways .Here is checking with clicked text to get first button click

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

set id is the better

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

give id's to the buttons, n call those accordingly like

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

This my js code:

• i want to click first button to call a new class,it works but, every button doing same work. when i click second button this also calling a new class.please help me to solve this.

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

  this my html code:

  <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">hello.</a></div>
  

This my js code:

• i want to click first button to call a new class,it works but, every button doing same work. when i click second button this also calling a new class.please help me to solve this.

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

  this my html code:

  <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.">hello.</a></div>
  

• javascript
• jquery
• html

Share Improve this question Follow asked Sep 27, 2016 at 9:41 heart hackerheart hacker 43122 gold badges99 silver badges2222 bronze badges 0

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 1

You have to set an id to that particular button and then attach click event handler to that particular button using id. Here is the code.

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

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

You can use contains('first').

The thing is that your using button as selector, that will not understand which button is clicked actually.

I would remend, To make jQuery understand you should provide any specific id to that element.

But if you want to do it based on the text inside a DIV, you can use contains('first').

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

<script src="https://ajax.googleapis./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.">hello.</a></div>

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

<script src="https://ajax.googleapis./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.">hello.</a>
</div>

use .eq() to select which button you need the click

Note: eq() is index based which starts with 0

With $("Button") you are referring to the Button element and not a certain Button so every button will do the same action. You should give your Buttons an id and then call them based on their Id.
Like:

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

And then call them with the id selector # like so: $("#firstBtn").click()..

Remove the inline style and use a separate css class

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

CSS

.hide {
  display:none;
}

JSFIDDLE

If you want to click first button to call a new class , you can do by many ways .Here is checking with clicked text to get first button click

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

set id is the better

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

give id's to the buttons, n call those accordingly like

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

本文标签： javascriptHow to show a div when a particular button is clicked Stack Overflow