Question

我有一个列表，每个LI元素都有一个按钮。此外，当点击（点击）按钮时，在＆＃34;上添加课程＆＃34;

所以这是我的代码

<ul>
<li><a href="#" class="btn">txt 1</li>
<li><a href="#" class="btn">txt 2</li>
<li><a href="#" class="btn">txt 3</li>
</ul>

<style>
.btn { background:blue }
.btn.on { background:red }
</style>

<script>
 $(document).on('vmousedown','.btn' ,function(){
        $(".btn").addClass('on');
    }).on('vmouseup', function(){
        $(".btn").removeClass('on');
    }).on("vmousecancel", function() {
        $(".btn").removeClass('on');
     });
</script>

问题是当我按下Txt1上的按钮时，所有按钮都会在＆＃34;上添加课程＆＃34;。

我想只添加一个我点击的类。

如何修复此脚本？

Answer 1

触发事件时，this关键字指的是触发事件的元素。因此，要访问您按下的特定按钮：

$(document).on('vmousedown','.btnPhone' ,function(){
        $(this).addClass('on');
    }).on('vmouseup', function(){
    $(this).removeClass('on');
}).on("vmousecancel", function() {
    $(this).removeClass('on');
 });

Answer 2

$('.btn').click(function(e){
    $(e.delegateTarget).addClass('on');
});

在按钮上添加/删除类的麻烦

2 个答案: