Question

所以我正在处理一个项目，它包含很多按钮，但有一种方法，当我按下一个按钮时，它只会改变我点击的按钮。我知道我可以在每个按钮上添加一个类，但有更有效的方法吗？

这是当前代码，当您单击一个按钮时，它会全部更改。

$("button").mousedown(function() {
    $(".button").css("background","-webkit-linear-gradient(black, #333333)");
    $(".button").css("background","-o-linear-gradient(black, #333333)");
    $(".button").css("background","-moz-linear-gradient(black, #333333)");
    $(".button").css("background","linear-gradient(black, #333333)");
});
$("button").mouseup(function() {
    $(".button").css("background","-webkit-linear-gradient(#333333, black)");
    $(".button").css("background","-o-linear-gradient(#333333, black)");
    $(".button").css("background","-moz-linear-gradient(#333333, black)");
    $(".button").css("background","linear-gradient(#333333, black)");
});

例如，如果我有一个名为1的按钮，我可以设置它以便背景改变而不将其应用于所有按钮。提前谢谢。

Answer 1

您可以使用this作为被点击元素的参考，并单独更改。

实施例

$(".button").mouseup(function() {
    var elem = $(this); // elem contains the clicked element
    elem.css("background","-webkit-linear-gradient(#333333, black)");
});

Answer 2

您可以使用此代码轻松地使用渐变添加和删除类。它还将简化您的代码。同样，你将把所有的CSS保存在一起; - ）

$("button").mousedown(function() {
    $(this).removeClass('gradient1').addClass('gradient2');
});

$("button").mouseup(function() {
    $(this).removeClass('gradient2').addClass('gradient1');
});

分别控制每个按钮 - jQuery

2 个答案: