Question

设置简单;我希望能够在触发onClick-event时向（在本例中）一个按钮添加一个类。我的问题是我还没有找到一种方法将按钮本身作为参数传递给函数。我想做点什么：

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

然后是一个像这样的javaScript函数：

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

我知道我在这里遇到了很多错误，但这就是我发帖的原因。我已尝试过使用jQuery和没有jQuery的不同场景但我总是最终得到一个破解的解决方案（点击突然停止通过，课程没有添加等等）所以我决定问专业人士。

对我可以尝试的任何建议？感谢您阅读编辑和所有帮助！

Answer 1

它需要是一个使用.addClass()的jQuery元素，因此它需要像$()这样包装：

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

Answer 2

使用jQuery：

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

这样，您就不必使用onclick处理程序污染HTML标记。

Answer 3

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

应该做的伎俩。除非你用ajax加载按钮。在这种情况下你可以这样做：

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

另外请记住，不要在html代码中多次使用相同的ID。

Answer 4

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

Answer 5

尝试使你的css更具体，以便新的（绿色）风格比前一个更具体，这样它对我有用！

例如，您可以在css中使用：

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

而不是（可能不起作用）：

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

希望它有所帮助！

jQuery addClass onClick

5 个答案: