如何显示一个div被点击一个特定的按钮时，

问题描述：

我想点击第一个按钮来调用一个新的类，它的工作原理，但是，每一个按钮做同样的工作。当我点击第二个按钮时，这也叫一个新的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>

答

给的id的按钮，正因此呼吁那些像

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

谢谢大家解决这个...... –

我有多个按钮，并在网页中单击功能，当我点击这个第一个按钮（上图）和触发事件occurs..this作品，但是当我点击其他按钮调用触发事件......请帮助我如何解决这个... –

你需要给不同的ID的不同按钮 –

答

你有一个ID设置为特定的按钮，然后附上使用ID单击事件处理程序，以特定的按钮。这是代码。

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

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

答

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

答

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

开始

答

如果你想点击第一个按钮来调用一个新的类，你可以通过多种方式。在这里与点击文本检查，以获得先做按钮点击

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

答

随着$("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()..

答

删除内联风格和使用一个单独的CSS类

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

CSS

.hide { 
    display:none; 
}

JSFIDDLE

如果我有多个点击功能和页面中的多个按钮，那么我怎样才能调用特定的按钮功能 –

如何显示一个div被点击一个特定的按钮时，

相关推荐