Question

我有一个带按钮的列表。所有人都有同一个班级。我怎么能只选择使用jQuery点击的DOM元素？

假设我只想在点击的按钮上拨打.fadeOut()并保留其余按钮......

HTML：

<ul>
    <li><button class="sidebutton" >click Me1!</button></li>
    <li><button class="sidebutton" >click Me2!</button></li>
    <li><button class="sidebutton" >click Me3!</button></li>
    <li><button class="sidebutton" >click Me4!</button></li>
</ul>

Answer 1

试试这个：

$('.yourclass').click(function () {
    $(this).fadeOut(); //$(this) is the clicked button
})

Answer 2

$("button").click(function(){
    $(this).fadeOut(); //this referes current clicked button
});

Answer 3

你可以采取两种方式：

1。为每个按钮分配一个事件处理程序：

$('.sidebutton').on('click', function () {
    $(this).fadeOut();
});

2。将一个事件处理程序分配给<ul>并让事件向上传播：

$('ul').on('click', '.sidebutton', function () {
    $(this).fadeOut();
});

Answer 4

请试试这个：

<html>
<head>
    <title>Helper</title>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
    <ul>
        <li><button>Click me!</button></li>
        <li><button>Click me!</button></li>
        <li><button>Click me!</button></li>
        <li><button>Click me!</button></li>
    </ul>
</body>
<script type="text/javascript">
    (function(){
        $('li button').on('click', function(){
            $(this).fadeOut("slow", function(){
                console.log('Completed!');
            })
        })
    })();


</script>       
</html>

Jquery如何只选择.clicked DOM元素

4 个答案: