Javascript 在鼠标按下时更改类，但在鼠标按下时将其还原

当我单击一个类时，我想删除该类并向元素添加一个新类。现在，当我从类中释放鼠标时，我想删除添加的新类并替换为旧类

这只是添加了新类，但并没有在我使用鼠标时逆转更改

<i class="fa fa-arrows"></i>


    $('.fa-arrows').mousedown(function(){
        $(this).removeClass('fa-arrows').addClass('fa-random');
    });

    $('.fa-random').on('mouseup',function(){
        $(this).removeClass('fa-random').addClass('fa-arrows');
    });

$（'.fa箭头'）.mousedown（函数（）{
$（this）.removeClass（'fa-arrows'）.addClass（'fa-random'）；
});
$（'.fa random'）。on（'mouseup'，function（）{
$（this）.removeClass（'fa-random'）.addClass（'fa-arrows'）；
});

---

您可以使用事件委派：

$(document).on('mousedown', '.fa-arrows', function () {
    $(this).removeClass('fa-arrows').addClass('fa-random');
});
$(document).on('mouseup', '.fa-random', function () {
    $(this).removeClass('fa-random').addClass('fa-arrows');
});

---

执行此代码时，jQuery执行的是：它查找所有

.fa箭头

并将函数绑定到

鼠标向下

，它查找所有

.fa随机

并将其他函数绑定到

鼠标向下

。这种情况只发生一次，不会在每次任何类/DOM更改时神奇地重新计算。（这就是React/AngularJS/…发挥作用的地方。）

每当类发生变化时（在绑定函数中），您必须手动重新计算绑定，或者将两者绑定到相同的元素（我将使用后者）：

$（“.fa箭头”）
.on（'mousedown'，function（）{
$（this）.removeClass（'fa-arrows'）.addClass（'fa-random'）；
})
.on（'mouseup'，function（）{
$（this）.removeClass（'fa-random'）.addClass（'fa-arrows'）；
});
.fa箭头{文本装饰：下划线；}
.fa随机{颜色：红色；文本装饰：线穿过；}

mousedown me
此操作不起作用的原因是在开始时设置了事件，而mouseup事件设置为
.fa random
，此时不存在

正如j08691所说，您可以使用文档中的事件委派，也可以将事件放在
.fa
上，它也应该可以工作：

$('.fa').mousedown(function(){
    $(this).removeClass('fa-arrows').addClass('fa-random');
});

$('.fa').mouseup(function(){
    $(this).removeClass('fa-random').addClass('fa-arrows');
});

如果单击或不单击某个变量，则可以将其设置为true/false。如果在同一页上多次执行此操作，则需要修改脚本


var=false；
$（文档）.on（'mousedown'，'.fa箭头'，函数（）{
$（this）.removeClass（'fa-arrows'）.addClass（'fa-random'）；
单击=真；
});
$（document）.on（'mouseup'，function（）{
如果（单击）{
单击=假；
$（'.fa random'）.removeClass（'fa-random'）.addClass（'fa-arrows'）；
}
});

你只需拨弄链接即可进入主页。也许您链接了错误的示例？啊哈，很抱歉，这是链接，因为更改类时事件不会自动绑定！鼠标应该被链接到箭头上……如果我不在图标上悬停时放开鼠标，怎么样。那就不行了。还有什么方法可以捕捉到这一点吗？如果我不在图标上悬停的时候放开鼠标呢。那就不行了。是否仍有捕获此信息的方法？jQuery为此提供了一个事件。您可以将一个事件处理程序绑定到
mouseup
和
blur
。但如果按住鼠标并将其从元素上移开，则会触发此操作。如果您真的想在用户将鼠标移离图标时触发mouseup事件，则必须使用集中式事件处理（捕获文档中的所有事件，然后将它们发送到需要它们的元素）——但这是一条漫长而难看的道路。顺便说一句，纯css版本在不悬停图标的情况下工作如果我不在图标上悬停时放开鼠标怎么样。那就不行了。是否仍有捕获此信息的方法？将鼠标最多更改为
）。在（'mouseup mouseout'，