2

我想动态地将新闻更新添加到页面。登录后，您将获得 20 条新闻。向下滚动到底部，有一个“更多”按钮。单击它，一些 ajax 从服务器获取 20 多个 json 格式。Javascript 将 json 解析为名称、日期、评论、图片等。

好消息是它确实有效。我可以为每个名称日期注释等创建文本节点，并将它们添加到 id="more" div，这一切都在一个简介中出现。

如何将其转换为与周围 div 相同的格式？我会尽量简短...

三栏布局，内三栏布局...

<div class="wrapper threecol">
<div class="colmid">
    <div class="colleft">
        <div class="col1">
            <div class="friends">   
            <div class="colwrap st-leftmenu">
                <c:forEach var="st" items="${news}">
                <div class="st-colleft">
                <div class="st-col1">
                <div class="statusName">
                    ${st.name}
                </div>
                        <%-- date, comment, pic etc. omitted --%>

                </div> <%-- end st-col2 --%>
                </div> <%-- end div class st-colleft --%> 
                </c:forEach>
                </div> <%-- end div class colwrap st leftmenu --%>

                        <%-- add new stuff here dynamically --%>
                <div id="showExtra"></div>

                <a href="javascript:void(0)" onclick="moreStatus()">get more</a>
            </div> <%-- end div class friends --%>
            </div> <%-- end col1 --%>

我正在尝试添加到 id="showExtra" div，其部分工作如上。我尝试在 js 中创建一个复杂的嵌套 div 结构。这让我成功了，但这不可能是这样做的……有点乱，抱歉……

function showMoreStatus(){
var moreDiv = document.getElementById('showExtra'); 

var moreJSON = new Array();

if(request.readyState == 4) {
    if (request.status == 200) {
        moreJSON = eval('(' + request.responseText + ')');
        for(var i=0; i<moreJSON.length; i++) {              
            //get values from JSON
            var JSONName = moreJSON[i][2];
                            // and others...

            //create text nodes, a href and img
            var nameTextNode = document.createTextNode(JSONName);
                            // and other nodes, imgs, hrefs etc...

                            // surely this is NOT the way to do it!             
            //column divs
            var outColDiv = document.createElement("div");
            outColDiv.setAttribute("class", "col1");
            var friendsDiv = document.createElement("div");
            friendsDiv.setAttribute("class", "friends");
            var colLeftDiv = document.createElement("div");
            colLeftDiv.setAttribute("class", "st-colleft");
            var col1Div = document.createElement("div");
            col1Div.setAttribute("class", "st-col1");
            var col2Div = document.createElement("div");
            col2Div.setAttribute("class", "st-col2");
            colLeftDiv.appendChild(col1Div);
            colLeftDiv.appendChild(col2Div);
            friendsDiv.appendChild(colLeftDiv);
            outColDiv.appendChild(friendsDiv);



            var nameDiv = document.createElement("div");
            nameDiv.setAttribute("class", "statusName");
                            // and others...

            // append nodes to divs
            nameDiv.appendChild(nameTextNode);

            col1Div.appendChild(nameDiv);
            col1Div.appendChild(dateDiv);
            col1Div.appendChild(contentDiv);

            // append the page
            moreDiv.appendChild(outColDiv);
        }
    }
}

}

呸！感谢您阅读本文。

嗯，这根本不是简短的。事实上，这可能是不必要的。

这里的正确方法是什么？我怎样才能让 nameTextNode 和他所有的朋友和 ${st.name} 坐在同一个地方？

4

2 回答 2

1

你没有展示你的 CSS，所以很难准确地说出什么是破坏性的。我的猜测是，因为您将新元素嵌套在这个“showExtra”div 中，所以您破坏了 CSS 选择器。您可能应该只添加与现有元素相同级别的新元素，即在此元素内

<div class="colwrap st-leftmenu">

此外，您可能需要查看标签中 id 属性的使用情况。Id 应该是唯一值，并且根据您的循环结构，看起来您将获得具有相同 id 的“statusNameDiv”的多个项目。

于 2012-08-01T14:53:11.627 回答
1

一般概念是，如果 HTML 元素与给定的 CSS 选择器匹配，则 CSS 应该被适当地应用。即使您通过 AJAX 动态添加它们。

我建议确保你的 CSS 是防弹的。我认为这可能是您遇到的第一个痛点。如果您有一个新闻列表，请设置一个 HTML 列表，如下所示：

<ul id="news">
    <li><!-- News Block 1 --></li>
    <li><!-- News Block 2 --></li>
    <li><!--     ...      --></li>
    <li><!-- News Block N --></li>
</ul>

在每个新闻“块”中，您可以根据需要构建一些 HTML。例如：

<li>
    <h2>News title 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a href="#" class="read-more">Read More about News 1</a>
</li>

然后，您可以为所有块设置“新闻块”的样式。

#news h2{
    font-weight:600;
    font-family:Arial, Sans-Serif;
}
#news .read-more{
    text-decoration:none;
    color:#FF00FF;
}

从那里，您需要做的就是使用 JavaScript/AJAX 获取和格式化您的数据并附加 LI“块”。使用 jQuery 可以帮助简化此操作。

这是一些粗略的伪代码：

// get news items from AJAX
var newsList = $.ajax().getNews(10);
// loop through all new news items
for(i=0;i<newsList.size;i++) {
    // get a formatted LI block
    var block = formatNewsBlock(newsList[i]);
    // append news block to end of news list
    $('#news').append(block);
}

一个好的结构可以帮助使事情更容易实现。

我希望这会有所帮助！

干杯!

于 2012-08-01T15:35:25.753 回答