Question

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

这只是添加了新类，但是当我使用鼠标时没有反转更改。

<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');
    });

https://jsfiddle.net/873k5pgg/

Answer 1

您可以使用事件委派：

$(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');
});

<强> jsFiddle example

Answer 2

执行此代码时，jQuery的作用是：它查找所有.fa-arrows并将函数绑定到mousedown，它查找所有.fa-random并将另一个函数绑定到{ {1}}。 这发生一次，每次任何类/ DOM更改时都不会神奇地重新评估。（这就是React / AngularJS / ......发挥作用的地方。）

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

mouseup

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

.fa-arrows { text-decoration: underline; }
.fa-random { color: red; text-decoration: line-through; }

编辑：那说，为什么不用css？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="fa-arrows">mousedown me</p>

p { text-decoration: underline }
p:active { color: red; text-decoration: line-through; }

Answer 3

这不起作用的原因是因为事件是在开始时设置的，而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');
});

Answer 4

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

var clicked = false;

$(document).on('mousedown', '.fa-arrows', function(){
    $(this).removeClass('fa-arrows').addClass('fa-random');
    clicked = true;
});

$(document).on('mouseup', function(){
    if (clicked) {
        clicked = false;
    	$('.fa-random').removeClass('fa-random').addClass('fa-arrows');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <i class="fa fa-arrows"></i>

在鼠标按下更改类但在mouseup上恢复它

4 个答案: