Пользовательский интерфейс jQuery выделяет сноски без событий onclick

Question

Я использую эффект подсветки пользовательского интерфейса jQuery, чтобы выделить одну из многих (> 20) сносок, потому что они могут легко заполнить средний экран, когда он направлен туда.Я передаю номер сноски как значение функции с событием onclick.Я уверен, что есть более элегантный способ реализовать это без загромождения HTML, но я относительно новичок в JS ...

function highlighter(footnote_number) {
    $(document).ready(function () {
        $('li[id="footnote' + footnote_number + '"]').effect("highlight", {}, 3000);
    });
};

Сноски в тексте:

<a id="footnote_a1" href="#footnote1" onclick="highlighter('1')">1</a>

прямо на:

<div id="footnotes">
    <ol>
        <li id="footnote_a1">
            (Footnote)
           <a href="#footnote1">&uarr;</a>
        </li>
    </ol>
</div>

Answer 1

Woudlnt было бы проще написать ...?

$('#footnote' + footnote_number).effect(...)

Answer 2

Вы хотите извлечь метод $ (document) .ready () из функции:

function highlighter(footnote_number) {
    $('li[id="footnote' + footnote_number + '"]').effect("highlight", {}, 3000);
}

Answer 3

Это будет проходить через каждый якорь с классом сносок и связывать событие click (), чтобы выделить ваши сноски.

$(function(){
  $('ol').find('a.footnote').each(function(){
    var id = $(this).attr('id')
    $(this).bind('click', function(){
      $('div#footnotes li#' + id).effect("highlight", {}, 3000);
    })
  })
})