javascript - 不明白为什么这个 javascript 在 jAm 中不起作用

Question

在我看来这应该可行(基于对 SM 上其他问题的回答)，但我没有得到任何结果...

这是我在页面头部的代码:

第二次编辑:

<script type="text/javascript">

        function capitalizeFirstLetter(string){
            return string.charAt(0).toUpperCase() + string.slice(1);
        }


        $(document).delegate('#sun, #mon, #tue, #wed, #thu, #fri, #sat', 'pageshow' , function() { 
            var days   = ['sun','mon','tue','wed','thu','fri','sat'],
                output = [],//create an output buffering variable
                d = new Date();
            for(var x=0; x<days.length; x++){
                //rather than manipulate the DOM every iteration of the loop we add a string of HTML to an array
                output.push('<li><a href="#' + days[x] + '">' + capitalizeFirstLetter(days[x]) + '</a></li>');
            }

            //now we add the buffered data to the listview and either refresh or initialize the widget
            var $cNav = $('#custom-navbar')
            $cNav.append(output.join(''));

            //if the listview has the `ui-listview` class then it's been initialized, and the widget needs to be refreshed, otherwise it needs to be initialized
            if ($cNav.hasClass('ui-navbar')) {
                $cNav.navbar('refresh');
            } else {
                $cNav.navbar();
            }
        });

    </script>

这是我在正文中的代码:

<div data-role="content">
<div data-role="navbar" style="margin: -10px 0 15px 0;">
    <ul id="custom-navbar"></ul>
</div>

Answer 1

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
    $(document).delegate('#sun', 'pageshow' , function() { 
        alert("!");
        var days   = ['sun','mon','tue','wed','thu','fri','fri','sat'],
            output = [];//create an output buffering variable
        for(var x=0; x<days.length; x++){
            alert(days[x]);

            //rather than manipulate the DOM every iteration of the loop we add a string of HTML to an array
            output.push('<li><a data-ajax="false" href="#' + days[x] + '">' + days[x] + '</a></li>');
        }

        //now we add the buffered data to the listview and either refresh or initialize the widget
        var $cNav = $('#custom-navbar')
        $cNav.append(output.join(''));

        //if the listview has the `ui-listview` class then it's been initialized, and the widget needs to be refreshed, otherwise it needs to be initialized
        if ($cNav.hasClass('ui-listview')) {
            $cNav.listview('refresh');
        } else {
            $cNav.listview();
        }
    });

</script>
<script src="../js/jquery.mobile-1.0.1.js"></script>

由于此代码运行每个 pageshow 事件，因此当用户导航到页面、离开页面然后返回页面时，您将获得多个列表。您可以改用 pageinit 事件:http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

更新

您页面中的错误来自这里:

                $('ul#custom-navbar').append('<li/>', {
                    .append('<a/>', {
                        'href' = "#" + days[x],
                        'data-ajax' = "false",
                        'text' = days[x]
                    });
                });

你看到了吗？您有一个额外的 、{ 并且缺少一些使它有意义的语法。您还在应该使用冒号的地方使用了等号(因为您正在设置对象的属性):

                $('ul#custom-navbar').append(
                    $('<li/>').append('<a/>', {
                        'href'      : "#" + days[x],
                        'data-ajax' : "false",
                        'text'      : days[x]
                    })
                );

这会创建一个列表项，然后附加一个带有一些属性集的链接。

请注意，您可以复制我的代码，将其粘贴到您的代码(在您的文档中)上，这样就可以正常工作。我已经使用我的控制台对其进行了测试。

在一般意义上，您应该学会使用您的控制台，它将为您提供惊人的帮助。例如，我在大约 30 秒内发现了您页面上的错误...