帮助转换内联 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

您还可以使用委托来获得更好的性能：

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

Demo

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>