jquery 和 json 从 var 中提取数据

Question

我有这个代码：

 $.getJSON("Featured/getEvents",
                function(data){
              $.each(data.events, function(i,event){
                    var title = event.title.substr(0,20);
                    $("#title-"+i).text("Text");
                        if ( i == 4 ) return false;
                  });
                });

我正在结合一个 php 循环来渲染一个 div 5 次，我想使用 var 和 .text() 将我的内容从 JSON 中放入 ID 中，但它不起作用，我该怎么做获取一个 var，在本例中为 jquery text() 中的标题，以便它可以将其放置在相应的 div 中？

这是它连接到的对应的php（部分）：

<?php for($i = 0; $i <= 4; $i++)
    { ?>

    <div id="event-item-<?= $i?>" class="event">
        <div class="column-left">
        <div class="title"><h3><a href="" id="title-<?= $i?>"></a></h3></div>

这是渲染的版本：

<div id="event-item-0" class="event">
   <div class="column-left">
        <div class="title"><h3><a href="" id="title-0"></a></h3></div>
             <div class="inner-left">
                <img src="http://philly.cities2night.com/event/85808/image_original" class="image" width="133" height="100">
                <p class="author">Posted by: <br> <a href="#">Brendan M. (22 Events)</a></p>
            </div>
            <div class="inner-middle">
            <p class="description" id="description-0"></p>

            <p class="notify"><img src="images/recommened_ico.png" alt="Recommened Event" width="98" height="21"></p>
            <p class="links">
            <!-- AddThis Button BEGIN -->
            <a href="http://www.addthis.com/bookmark.php?v=250&amp;pub=philly2night" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" alt="Bookmark and Share" style="border: 0pt none ;" width="125" height="16"></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=philly2night"></script>
            <!-- AddThis Button END -->
            <a href="#" class="button">View Event</a></p>
            </div>
        </div>


        <div class="column-right">
            <ul id="event-options">
                <li class="total-attending"><span><a href="#">502</a>Attending</span></li>
                <li class="rsvp"><span><a href="#">RSVP</a></span></li>
                <li id="like" class="notlike"><span>(3) Likes <br><span class="message"><a href="javascript:;" class="likeon">Do You Like it?</a></span></span></li>
                <li class="comment"><span><a href="#">Comments (200)</a></span></li>

                <li class="location"><span><a href="#">Location Name</a></span></li>
            </ul>
            </div>
        </div>

        ...     
</div>

Answer 1

应该像引用变量一样简单。

$("#title-"+i).text( title );

或者，如果您的标题包含标记，

$("#title-"+i).html( title );

如果这不起作用，请确保您没有收到任何阻止代码运行的 javascript 错误。

编辑：这可能相关也可能不相关，但我会避免使用 event 作为变量名。太容易与 window.event 对象混淆，可能会导致其他问题。一般来说，在这种情况下我会使用 evt。

其他可能性：文档加载完成后，您没有运行 getJSON 方法，或者该方法与当前页面无关。如果简单的事情似乎没有让您有任何帮助，您可以尝试使用 Firefox/Firebug 来单步调试代码，看看它在做什么。我的简单示例带有您的标记，并且仅使用 jQuery 设置锚的文本工作正常，所以我认为问题不在于设置文本的代码。

$(function() {
    $.getJSON("/Featured/getEvents",
            function(data){
                 $.each(data.events, function(i,evt){
                    var title = evt.title.substr(0,20);
                    $("#title-"+i).text(title);
                    if ( i == 4 ) return false;
                 });
            });
});

Answer 2

你想使用.html(val)。

编辑：实际上，.text(val) 会将文本按原样放置在元素内。使用 .html(val) 将使您添加的任何 HTML 都能正确呈现。

Answer 3

您是否尝试过使用title 而不是"Text"？

$.getJSON("Featured/getEvents", function(data){
    $.each(data.events, function(i,event){
        var title = event.title.substr(0,20);
        $("#title-"+i).text(title);
        if ( i == 4 ) return false;
    });
});