Select JQuery 中 class 的多个 children

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>

这根本行不通。我想为 "selector" class 的每个按钮分配一个动作，以在单击后隐藏 select 或 div 本身 - 这就是我 select 它与 CSS 我认为它会起作用，但它不起作用。按钮没有得到任何 JS 事件

Answer 1

据我了解，您希望每个具有特定 class 的按钮在单击时隐藏 div。您可以通过将 on-click 事件处理程序分配给任何在其 class 列表中显示 class 的按钮来实现。

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 的工作示例

另一方面，如果您不想分配 class，您可以这样做

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 的工作示例。

Select JQuery 中 class 的多个 children

Select multiple children of a class in JQuery

html

javascript

jquery

selector