在JQuery中选择一个类的多个子级

时间:2018-09-23 13:32:24

标签: javascript jquery html selector

我的div上有很多按钮标签

$('#class_selector button').click(function(a){
    $('#class_selector').hide();
    console.log(a);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="class_selector">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>

这根本不起作用。我想为“选择器”类的每个按钮分配一个操作,以在单击后隐藏选择器div本身-这是我要使用CSS进行选择的方式,我认为这是可行的,但不可行。按钮没有任何JS事件

1 个答案:

答案 0 :(得分:0)

据我了解,您希望每个具有特定类的按钮在单击时都隐藏一个div。您可以通过为所有在其类列表中具有该类的按钮分配一个单击事件处理程序来实现。

HTML

<div id="selector-buttons">
  <button class="selector-button">Button 1</button>
  <button class="selector-button">Button 2</button>
  <button class="selector-button">Button 3</button>
</div>

JS

$(document).ready(() => {
// grab everything that has the 'selector-button' class in its class list
$('.selector-button').on('click', ()=>{
    // hide the div
        $('#selector-buttons').hide();
    });
});

查看此fiddle以获取有效示例

另一方面,如果您不想分配课程,则可以这样做

HTML

<div id="selectors">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 2</button>
</div>

JS

$(document).ready(()=>{
        // get every button inside the div
        $('#selectors').find('button').on('click', ()=>{
        // hide the div
        $('#selectors').hide();
    });
})

这是一个fiddle,用于工作示例。