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

......但我不确定如何加入它。（我也看到了一些使用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>

帮助转换内联onclick

2 个答案: