JQUERY, возвращая объект, который был нажат, чтобы добавить класс

Question

Учитывая следующее:

<div id="table-filters">
    <ul>
        <li class="active" onclick="myfunc();">blah</li>
        <li onclick="myfunc();">blah</li>
        <li onclick="myfunc();">blah</li>
        <li onclick="myfunc();">blah</li>
    </ul>
</div>

function myfunc() {
// Activate the LI clicked
$(this).addClass("active");
}

Я бы хотел, чтобы мой JQUERY работал следующим образом. Добавьте class = "active" к любому нажатию LI.

Answer 1

Удалите ваши onClick звонки из HTML, а затем поместите в файл .js следующее:

$("#table-filters li").click(function(){
  $(this).addClass("active").siblings("li.active").removeClass("active");
  // requested in comments: how to get id of LI clicked?
  var thisID = $(this).attr("id");
});

Answer 2

$("#table-filters li").click(function(){
  $("#table-filters li.active").removeClass("active"); // remove current active
  $(this).addClass("active"); // set new active

  // Put more stuff here that you want to happen when clicked.

});

Добавление прослушивателя событий с использованием этого метода обычно считается «хорошим» способом, добавление прослушивателя с использованием onlick="BLAH" считается плохим способом.

Answer 3

Вам не нужно использовать .click (...); вместо этого вы можете сделать это так, как хотите:

<div id="table-filters">
    <ul>
        <li class="active" onclick="myfunc(this);">blah</li>
        <li onclick="myfunc();">blah</li>
        <li onclick="myfunc();">blah</li>
        <li onclick="myfunc();">blah</li>
    </ul>
</div>

function myfunc(li) {
// Activate the LI clicked
$(li).addClass("active");
}