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

【问题标题】：jQuery UI Highlight Footnotes Without onclick Events没有 onclick 事件的 jQuery UI 突出显示脚注
【发布时间】：2011-12-03 07:14:16
【问题描述】：

我正在使用 jQuery UI 高亮效果来突出显示许多 (>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>

【问题讨论】：

标签： jquery jquery-ui onclick highlight

【解决方案1】：

写起来会不会更简单...？

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

【讨论】：

【解决方案2】：

您需要将 $(document).ready() 方法从函数中移除：

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

【讨论】：

【解决方案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);
    })
  })
})

【讨论】：

非常感谢，虽然我发现 .find() 没有必要，而是使用选择器。并使用锚的 href 属性通过 id 引用适当的 li：$(function(){ $('a[id^="footnote"]').each(function(){ var id = $(this).attr('href'); $(this).bind('click', function(){ $(id).effect("highlight", {}, 3000); }) }) });
$(this).id 完全没有必要。 this.id 跨浏览器工作。 stackoverflow.com/questions/4651923/…