JQuery addClass onClick

Настройка очень проста; Я хочу, чтобы добавить класс в (в этом случае) кнопку при запуске onClick-event. Моя проблема в том, что я не нашел способ передать кнопку в качестве параметра функции. Я хотел бы сделать что-то вроде:

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

И тогда функция javaScript выглядит примерно так:

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

Я знаю, что у меня здесь много ошибок, но почему я публикую. Я пробовал разные сценарии с jQuery и без jQuery, но у меня всегда заканчивается сломанное решение (щелчки внезапно перестают проходить, класс не добавляется и т.д.), Поэтому я решил спросить у профессионалов.

Любое предложение о том, что я могу попробовать? Спасибо за чтение edit и всю помощь!

Ответы

Ответ 1

Это должен быть элемент jQuery для использования .addClass(), поэтому его необходимо обернуть в $() следующим образом:

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

Лучшее общее решение было бы ненавязчивым script, например:

<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

Использование jQuery:

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

Таким образом, вам не нужно загрязнять вашу HTML-разметку обработчиками onclick.

Ответ 3

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

должен сделать трюк. если вы не загружаете кнопку с помощью ajax. В этом случае вы можете сделать:

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

Также помните, что не используйте один и тот же идентификатор более одного раза в своем html-коде.

Ответ 4

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

Ответ 5

Попробуйте сделать ваш css более конкретным, чтобы новый (зеленый) стиль был более конкретным, чем предыдущий, чтобы он работал у меня!

Например, вы можете использовать в css:

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

Вместо (возможно, не работает):

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

Надеюсь, что это поможет!