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

Question

我有一个列表,每个LI元素都有一个按钮.此外,当单击(点击)按钮时,添加"on"类.

所以这是我的代码

<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,所有按钮都添加了"打开"类.

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

我该如何修复这个脚本？

Answer 1

触发事件时,this关键字引用触发事件的元素.因此,要访问您按下的特定按钮:

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