Question

我正在使用jQuery UI Highlight效果来突出显示许多（＆gt; 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

你需要从函数中取出$（document）.ready（）方法：

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

Answer 2

写下来会不会更简单？？

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

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

jQuery UI突出显示没有onclick事件的脚注

3 个答案: