0

I am using the jQuery UI Highlight effect to highlight one of many (>20) footnotes because they can easily fill an average screen once directed there. I am passing the footnote number as a value of a function with an onclick event. I am sure there is a more elegant way of implementing this without those cluttering up the HTML, but I am a relatively new to JS...

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

Footnotes within the text: 

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

direct to:

<div id="footnotes">
    <ol>
        <li id="footnote_a1">
            (Footnote)
           <a href="#footnote1">&uarr;</a>
        </li>
    </ol>
</div>
Adam Wenger
  • 17,100
  • 6
  • 52
  • 63
ShakespeareVet
  • 1

3 Answers3

1

You'll want to take the $(document).ready() method out of the function:

function highlighter(footnote_number) {
    $('li[id="footnote' + footnote_number + '"]').effect("highlight", {}, 3000);
}
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
Darek Rossman
  • 1,323
  • 1
  • 10
  • 12
1

Woudlnt it be simpler to write...?

$('#footnote' + footnote_number).effect(...)
Enrique Moreno Tent
  • 24,127
  • 34
  • 104
  • 189
0

This will loop through every anchor with a class of footnote and bind the click() event to highlight your footnotes.

$(function(){
  $('ol').find('a.footnote').each(function(){
    var id = $(this).attr('id')
    $(this).bind('click', function(){
      $('div#footnotes li#' + id).effect("highlight", {}, 3000);
    })
  })
})
Pastor Bones
  • 7,183
  • 3
  • 36
  • 56
  • Thanks a lot, though I found .find() unnecessary, using a selector instead. And used an anchor's href attribute to reference the appropriate li by id: `$(function(){ $('a[id^="footnote"]').each(function(){ var id = $(this).attr('href'); $(this).bind('click', function(){ $(id).effect("highlight", {}, 3000); }) }) });` – ShakespeareVet Dec 02 '11 at 20:14
  • `$(this).id` is completely unnecessary. `this.id` works across browsers. http://stackoverflow.com/questions/4651923/when-to-use-vanilla-javascript-vs-jquery – Matt Ball Dec 02 '11 at 23:16