如何显示一个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