帮助转换内联 onclick

Question

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

它们现在的样子如下：

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

...但不确定如何合并它。 （我还看到一些使用字符代码的脚本，上面的函数对我来说更容易理解。）

我希望得到一些帮助。在此期间我会继续努力。

谢谢。

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

演示

Answer 2

您可以执行以下操作：

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

将 HTML 更改为：

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