Question

我在html中有一个无序列表，我使用javascript

添加了列表项

$(document).ready(function () {
    $.ajax({
        url: "/Home/GetSchools",
        type: 'get',
        dataType: "json",
        async: false,
        success: function (data) {
            $.each(data.Items, function (index, value) {
                console.log("the schoolname is" + value.schoolName);
                $('ul#dropdown-items').append(' <li role="presentation"><a id="value.schoolId" role="menuitem" tabindex="-1" href="#" onclick="setschool(this.id);return false;">value.schoolName</a></li>');
                $('ul#dropdown-items').append('<li role="presentation" class="divider"></li>');
            });
        }
    });
});

我无法获得value.schoolName和onclick =“setschool（this.id）;工作..

Answer 1

这是因为您将值硬编码为字符串，而不是变量。检查页面时，是否正确打印了ID？

注意：您还要记住的一件事是 NOT 使用数字作为元素ID，而不是像这样编写：<a id="school_101">Graystone High</a>

这就是你如何实现一切：

$(document).ready(function () {
           $.ajax({
                    url: "/Home/GetSchools",
                    type: 'get',
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        $.each(data.Items, function (index, value) {
                            console.log("the schoolname is" + value.schoolName);
                            $('ul#dropdown-items').append(' <li role="presentation"><a id="school_'+value.schoolId+'" role="menuitem" tabindex="-1" href="#" onclick="setschool(this.id);return false;">'+value.schoolName+'</a></li>');
                        });
                     }
                });
           });

另外，我注意到你添加了附加2项：一个包含数据，而另一个用作分隔符。您使用一个<li>并检查该元素是否是数据集的最后一个。如果不最后一个，您可以为其设置border-bottom: 1px dashed #CCC样式。

Answer 2

选中此fiddle

$(document).ready(function () {
    i=0;
    value=["Hello","hi","hey"];
    $.each(value,function(){
        $('#dropdown-items').append("<li  > <a   style='cursor:pointer' id='"+value[i]+"'>"+value[i]+"</a></li><br/>");
        i++;
    });

    $("a").on("click",function(){
    alert(this.id);
    });
    });

Javascript无序列表Onclick

2 个答案: