2

ニュースの更新をページに動的に追加したいと考えています。ログインすると、20 のニュース記事が表示されます。一番下までスクロールすると、「もっと見る」ボタンがあります。それをクリックすると、一部の ajax がサーバーから json 形式でさらに 20 個を取得します。Javascript は json を名前、日付、コメント、写真などに解析します。

良いニュースは、それがうまく機能することです。各名前、日付、コメントなどのテキスト ノードを作成し、それらを id="more" div に追加すると、すべてが宣伝文句に表示されます。

周囲の div と同じ形式にするにはどうすればよいですか? これをできるだけ簡潔にします...

3 列のレイアウト、3 列のレイアウトの内側...

<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 に追加しようとしています。複雑な入れ子のdiv構造をjsで作ってみました。それは私をそこへの道のりの一部にしましたが、それはそれを行う方法ではありません...それは少し混乱しています、申し訳ありません...

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が特定のCSSセレクターと一致する場合、HTML要素に適切に適用される必要があるということです。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 に答える
1

CSS を表示していないため、何が問題なのかを正確に判断するのは困難です。この「showExtra」div内に新しい要素をネストしているため、CSSセレクターを壊していると思います。おそらく、この要素内にある既存の要素と同じレベルに新しい要素を追加する必要があります

<div class="colwrap st-leftmenu">

また、おそらくタグでの id プロパティの使用を確認する必要があります。Id は一意の値である必要があり、ループ構造に基づいて、「statusNameDiv」の同じ ID を持つ複数のアイテムを取得するように見えます。

于 2012-08-01T14:53:11.627 に答える