Question

我的问题是，当我点击提供程序时，这是一个列表项，其中包含一些元素，如img和h2，我总是得到提供者变量的最后一个值。我分配给clickProvider的参数不包含迭代所有提供程序时获得的值。

当我点击列表项时，它不包含正确的文本。

我希望你能理解我的问题。

function clickProvider(id) {
    console.log(id);
}

function loadProviders() {
    empty('provider-list');

    var providerList = elementById('provider-list');

    for (var index in providers) {
        var provider = providers[index];

        if (elementByName(provider.categorie).length > 0) {
            addProviderToCategory(provider.categorie, provider.text).addEventListener('click', function () {
                clickProvider(provider.text);
                return false;
            });
        } else {
            addProviderCategory(provider.categorie)
            addProviderToCategory(provider.categorie, provider.text).addEventListener('click', function () {
                clickProvider(provider.text);
                return false;
            });
        }
    }
}

document.addEventListener('DOMContentLoaded', function () {
    console.log('DOM loaded');

    loadProviders();
})

修改

HTML代码。上面的for循环创建了HTML。

<ul id="provider-list">
    <li name="category1">
        <a href="">Category Header 1</a>
        <ul id="category1">
            <li>
                <img src="">
                <a href="">Item 1</a>
            </li>
            <li>
                <img src="">
                <a href="">Item 2</a>
            </li>
        </ul>
    </li>
    <li name="category2">
        <a href="">Category Header 2</a>
        <ul id="category2">
            <li>
                <img src="">
                <a href="">Item 1</a>
            </li>
        </ul>
    </li>
</ul>

Answer 1

for循环中没有特殊范围，因此每次迭代都会覆盖变量provider，当您单击一个元素时，您将获得最后一次迭代{{ 1}}。

您需要的是某种关闭或范围来保持provider的价值，就像这样

provider

Answer 2

的Javascript

window.onload = function () {
    var navigation = document.getElementById("provider-list");
    navigation.onclick = function (evt) {
        // Event tweaks, since IE wants to go its own way...
        var event = evt || window.event;
        var target = event.target || event.srcElement;
        var text = "Link's text: " + target.innerHTML;
        alert(text);
    }
};

添加Click事件以动态添加列表项而不使用Jquery

2 个答案:

DEMO