javascript - 帮助转换内联 onclick

Question

我正在尝试将一些硬编码的内联点击转换为动态创建。

这是他们现在的样子:

(html)

<ul id="search-navlist">
    <li><a href="#" onclick="searchExhibitorsByAlphabet(this,'A'); return false;">A</a></li>
    <li><a href="#" onclick="searchExhibitorsByAlphabet(this,'B'); return false;">B</a></li>
    <li><a href="#" onclick="searchExhibitorsByAlphabet(this,'C'); return false;">C</a></li>
....
    <li><a href="#" onclick="searchExhibitorsByAlphabet(this,'Z'); return false;">Z</a></li>
</ul>

这是新代码:

(脚本)

$(document).ready(function() {
    $('#search-navlist li a').each(function() {
        $(this).attr("onclick", "searchExhibitorsByAlphabet(this,'A'); return false;");
    });
});

(在 html 中)

<ul id="search-navlist">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    ....
    <li><a href="#">Z</a></li>
</ul>

到目前为止，这工作正常，尽管所有链接都是相同的。我希望链接与其各自的字母相关联。

我找到了这个函数:

function iterateAlphabet() {
    var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    for(var i=0; i<str.length; i++) {
        var nextChar = str.charAt(i);
        alert(nextChar)
    }
}

...但不确定如何合并它。 (我也看到一些使用charcodes的脚本，上面的功能对我来说更容易理解。)

我会很感激一些帮助。在此期间，我会继续尝试。

谢谢。

Answer 1

你可以重写为:

<ul id="search-navlist">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
....
    <li><a href="#">Z</a></li>
</ul>


$(document).ready(function() {
    $('#search-navlist li a').click(function() {
        // alert($(this).text());
        searchExhibitorsByAlphabet(this, $(this).text());
        return false;
    });
});

DEMO

您还可以使用委托(delegate)以获得更好的性能:

$(document).ready(function() {
    $('#search-navlist').delegate('li a', 'click', function() {
        // alert($(this).text());
        searchExhibitorsByAlphabet(this, $(this).text());
        return false;
    });
});

Demo