0

ページ上で正常に表示される JavaScript 生成テーブルに問題があります。最後の div (bottom_box) には、その html コンテンツに基づくカスタム クラスが必要です。コードは以下のとおりです。

            <script type="text/javascript">
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET", "servicereport2.xml", false);
            xmlhttp.send();
            xmlDoc = xmlhttp.responseXML;

            if (xmlDoc) {
                var x = xmlDoc.getElementsByTagName("ISSUE");
                for (i = 0; i < x.length; i++) {
                    document.write("<div class='box_lrg'><div class='box_top'></div><div class='box_middle'><table border='0'>");
                    document.write("<tr><td class='title'><h2>");
                    document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
                    document.write("</h2></td><td class='issueid'><strong>IssueID: </strong><br />");
                    document.write(x[i].getElementsByTagName("ISSUEID")[0].childNodes[0].nodeValue);
                    document.write("</td><td class='status'><strong>Status: </strong><br />");
                    document.write(x[i].getElementsByTagName("STATUSID")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                    document.write("<tr><td colspan=3 class='description'>");
                    document.write(x[i].getElementsByTagName("TICKETDESCRIPTION")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                    document.write("<tr><td></td><td class='updated'><strong>Last Updated: </strong><br />");
                    document.write(x[i].getElementsByTagName("UPDATEDON")[0].childNodes[0].nodeValue);
                    document.write("</td><td class='author'><strong>Author: </strong><br />");
                    document.write(x[i].getElementsByTagName("AUTHOR")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                    document.write("</table>");
                    document.write("</div><div class='box_bottom'>");
                    document.write(x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue);
                    document.write("</div></div>");


                    category = $('.box_bottom').html();
                     if (category == 'Notifications') {
                       $(".box_bottom").addClass("notifications");
                     }
                     category = $('.box_bottom').html();
                     if (category == 'VO')
                     {
                       $(".box_bottom").addClass("VO");
                     }



                }
            }
            else {
                document.write("<h3><span class='blue'>There are no issues at the moment.</span></h3>");
            }

ご覧のとおり、JQuery はループに含まれていますが、同じクラスをすべての bottom_box div に適用しているだけです。それらはすべて CATEGORY XML タグの最初のオカレンスです。たとえば、最初の「カテゴリ」が VO で、2 番目が「通知」の場合、それらはすべて VO に適用されます。

どんな助けでも大歓迎です。

4

4 に答える 4

0

やり方が間違っているからうまくいかない。1 つの (最善の?) 解決策は、jQuery 要素の作成と append() 関数を使用することです。これにより、ループで使用してクラスを設定できる実際の dom 要素が生成されます。

あなたがこれをしているときの原因：

$(".box_bottom").addClass("notifications")

クラス .box_bottom を持つすべての要素にクラスを追加しています。これは、 for ループの最後に実際にはすべての下部ボックスです...

于 2013-05-24T12:31:42.687 に答える