javascript - 在按钮上添加/删除类时遇到问题

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 上的按钮时，所有按钮都添加了类“on”。

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

我该如何修复这个脚本？

Answer 1

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

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