Javascript Jquery如何仅选择.clicked DOM元素_Javascript_Jquery

Javascript Jquery如何仅选择.clicked DOM元素

javascript jquery

Javascript Jquery如何仅选择.clicked DOM元素,javascript,jquery,Javascript,Jquery,我有一个按钮列表。他们都有相同的班级。如何才能仅选择使用jQuery单击的DOM元素假设我想打电话。只在单击的按钮上淡出，其余按钮保持原样 HTML: 试试这个： $('.yourclass').click(function () { $(this).fadeOut(); //$(this) is the clicked button }) 有两种方法可以做到这一点：一,。为每个按钮分配一个事件处理程序： $('.sidebutton').on('click', function

我有一个按钮列表。他们都有相同的班级。如何才能仅选择使用jQuery单击的DOM元素

假设我想打电话。只在单击的按钮上淡出，其余按钮保持原样

HTML:

试试这个：

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

有两种方法可以做到这一点：

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

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

二,。将一个事件处理程序分配给，并让事件向上传播：

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

请试试这个：

<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教程都包含的吗？@Barmar但是OP搜索了所有教程都没有用，因为这是不同的

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

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