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将click事件处理程序附加到该特定按钮。这是代码。

<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

＆＃13;

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

＆＃13;

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

＆＃13;

使用.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元素而不是某个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，然后按相应的方式调用

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

如何在单击特定按钮时显示div，

7 个答案: