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

Question

我有一个充满按钮标签的 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 事件

Answer 1

据我了解，您希望每个具有特定类的按钮在单击时隐藏 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 。