代码之家 › 专栏 › 技术社区 › Phil

jQuery addClass onClick

jquery asp.net javascript

23

Phil · 技术社区 · 15 年前

设置很简单;我希望能够在触发onClick事件时(在本例中)向按钮添加一个类。我的问题是,我还没有找到一种方法将按钮本身作为参数传递给函数。我想做一些类似的事情:

<asp:Button ID="Button" runat="server" onclick="addClassByClick(this)"/>

然后一个javaScript函数如下:

function addClassByClick(button){
    button.addClass("active")
}

我知道我这里有很多错误,但这就是为什么我张贴。我尝试过使用jQuery和不使用jQuery的不同场景,但我总是以失败的解决方案告终(点击突然停止,没有添加类等等),所以我决定询问专业人员。

有什么建议我可以试试吗?谢谢你的阅读还有所有的帮助!

5 回复 | 直到 15 年前

1

49

Chris Bier 13 年前

它必须是jQuery元素才能使用 .addClass() $() 这样地:

function addClassByClick(button){
  $(button).addClass("active")
}

更好的整体解决方案是不引人注目的脚本,例如:

<asp:Button ID="Button" runat="server" class="clickable"/>

然后在jquery中:

$(function() {                       //run when the DOM is ready
  $(".clickable").click(function() {  //use a class, since your ID gets mangled
    $(this).addClass("active");      //add the class to the clicked element
  });
});

2

12

Benjamin Wohlwend 15 年前

$('#Button').click(function(){
    $(this).addClass("active");
});

这样,您就不必使用 onclick

3

demux 15 年前

$(document).ready(function() {
    $('#Button').click(function() {
        $(this).addClass('active');
    });
});

应该会成功的。除非你用ajax加载按钮。在这种情况下,您可以:

$('#Button').live('click', function() {...

4

1

kevtrout 13 年前

$('#button').click(function(){
    $(this).addClass('active');
});

5

0

JSON_Derulo 9 年前

试着让你的css更具体,这样新的(绿色)样式比上一个更具体,这样它就适合我了!

例如,您可以在css中使用:

button:active {/*your style here*/}

而不是(可能不起作用):

.active {/*style*/} (.active is not a pseudo-class)