简体   繁体   English

为数组中的每个对象显示div

[英]Show div for every object in array

I am new to Dojo and I need help. 我是Dojo的新手,需要帮助。 I have JSON file and inside array objects ( with properties name, type, status ) and I need to show something like one div with this data for every object which is inside array. 我有JSON文件和数组对象内部(具有属性名称,类型,状态),我需要为数组内部的每个对象显示类似此数据的一个div。 What widget to use ? 使用什么小部件? How to achive this ? 如何做到这一点? (if I have (如果我有

{
    "elements": [
        {
            "name": "a",
            "type": "A",
            "status": "active" 
        },
        {
            "name": "b",
            "type": "B",
            "status": "reactive" 
        } 
    ] 
}

how to vizualize this ?) 如何将其生动化?)

Shouldn't it be something simple like: 它不应该像这样简单吗:

dojo.forEach(jsonData.elements, function(element) {
    dojo.create("div", { name:element.name, type:element.type, status:element.status }, containerDiv);
});

显示一个<div>每小时一次</div><div id="text_translate"><p>我试图每小时显示一次&lt;div&gt;元素,但是当我添加以下代码时,代码不起作用: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div id='showOnceAnHour' style='display: none'&gt; &lt;script&gt; $(document).ready(function() { setInterval(function() { $("#showOnceAnHour").fadeIn().delay(10000).fadeOut(); }, 60*60*1000); }); &lt;/script&gt;</pre></div></div><p></p><p> 没有它,这段代码可以正常工作,但我想每小时显示一次该内容。 请看一下,让我知道我哪里出错了。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;,DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width: initial-scale=1"&gt; &lt;script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;style&gt;:btnadpop { background; #428bca: border; #357ebd solid 1px: border-radius; 3px: color; #fff: display; inline-block: font-size; 14px: padding; 8px 15px: text-decoration; none: text-align; center: min-width; 60px: position; relative: transition. color;1s ease. }:btnadpop:hover { background; #357ebd. }.btnadpop:btn-big { font-size; 18px: padding; 15px 20px: min-width; 100px. }:btn-close { color; #aaaaaa: font-size; 30px: text-decoration; none: position; absolute: right; 5px: top; 0. }:btn-close:hover { color; #919191. }:modaladpop:target:before { display; none. }:modaladpop:before { content;"": display; block: background, rgba(0, 0, 0. 0;6): position; fixed: top; 0: left; 0: right; 0: bottom; 0: z-index; 10. }.modaladpop:modal-dialoger { background; #fefefe: border; #333333 solid 1px: border-radius; 5px: margin-left; -200px: position; fixed: left; 50%: z-index; 11: width; 360px: -webkit-transform, translate(0; 0): -ms-transform, translate(0; 0): transform, translate(0; 0): -webkit-transition. -webkit-transform 0;3s ease-out: -moz-transition. -moz-transform 0;3s ease-out: -o-transition. -o-transform 0;3s ease-out: transition. transform 0;3s ease-out: top; 20%. }:modaladpop.target:modal-dialoger { top; -100%: -webkit-transform, translate(0; -500%): -ms-transform, translate(0; -500%): transform, translate(0; -500%). }:modal-bodyadpop { padding; 20px. },modal-headeradpop. :modal-footer { padding; 10px 20px. }:modal-headeradpop { border-bottom; #eeeeee solid 1px. }:modal-headeradpop h2 { font-size; 20px. }:modal-footeradpop { border-top; #eeeeee solid 1px: text-align; center: } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id='showOnceAnHour' style='display. none'&gt; &lt;script&gt; $(document).ready(function() { setInterval(function() { $("#showOnceAnHour").fadeIn().delay(10000);fadeOut(), }; 60*60*1000); }). &lt;/script&gt; &lt;.-- Modal --&gt; &lt;div class="modaladpop" id="modal-one" aria-hidden="true"&gt; &lt;div class="modal-dialoger"&gt; &lt;div class="modal-headeradpop"&gt; &lt;h2&gt;Welcome&lt;/h2&gt; &lt;/div&gt; &lt;div class="modal-bodyadpop"&gt; &lt;p&gt;This is an Example&lt;/p&gt; &lt;/div&gt; &lt;div id="butnclose" class="modal-footeradpop"&gt; &lt;a href="#modal-one" class="btnadpop"&gt;Close&lt;/a&gt; &lt;script&gt; document.getElementById("butnclose");style.display = "none". function showStuff() { document.getElementById("butnclose");style,display = "block"; } setTimeout(showStuff, 5000); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre></div></div><p></p></div> - Show a <div> once every hour

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 添加一个<div>对于数组中的每个 object</div><div id="text_translate"><p> 如果我执行sql.prepare("SELECT * FROM DB where VALUE &gt;=?").get(value)它将返回一个大于或等于 value 的行数组。 如何制作并添加一个新的&lt;div&gt;容器,其中包含数组的一部分作为文本?</p></div> - Adding a <div> for every object in array div为数组中的每个div重叠 - div Overlay for every div in an array 每隔5分钟显示div javascript - Show div every 5 minutes javascript 显示每个套接字连接的div - show a div with every socket connection 显示一个<div>每小时一次</div><div id="text_translate"><p>我试图每小时显示一次&lt;div&gt;元素,但是当我添加以下代码时,代码不起作用: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div id='showOnceAnHour' style='display: none'&gt; &lt;script&gt; $(document).ready(function() { setInterval(function() { $("#showOnceAnHour").fadeIn().delay(10000).fadeOut(); }, 60*60*1000); }); &lt;/script&gt;</pre></div></div><p></p><p> 没有它,这段代码可以正常工作,但我想每小时显示一次该内容。 请看一下,让我知道我哪里出错了。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;,DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width: initial-scale=1"&gt; &lt;script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;style&gt;:btnadpop { background; #428bca: border; #357ebd solid 1px: border-radius; 3px: color; #fff: display; inline-block: font-size; 14px: padding; 8px 15px: text-decoration; none: text-align; center: min-width; 60px: position; relative: transition. color;1s ease. }:btnadpop:hover { background; #357ebd. }.btnadpop:btn-big { font-size; 18px: padding; 15px 20px: min-width; 100px. }:btn-close { color; #aaaaaa: font-size; 30px: text-decoration; none: position; absolute: right; 5px: top; 0. }:btn-close:hover { color; #919191. }:modaladpop:target:before { display; none. }:modaladpop:before { content;"": display; block: background, rgba(0, 0, 0. 0;6): position; fixed: top; 0: left; 0: right; 0: bottom; 0: z-index; 10. }.modaladpop:modal-dialoger { background; #fefefe: border; #333333 solid 1px: border-radius; 5px: margin-left; -200px: position; fixed: left; 50%: z-index; 11: width; 360px: -webkit-transform, translate(0; 0): -ms-transform, translate(0; 0): transform, translate(0; 0): -webkit-transition. -webkit-transform 0;3s ease-out: -moz-transition. -moz-transform 0;3s ease-out: -o-transition. -o-transform 0;3s ease-out: transition. transform 0;3s ease-out: top; 20%. }:modaladpop.target:modal-dialoger { top; -100%: -webkit-transform, translate(0; -500%): -ms-transform, translate(0; -500%): transform, translate(0; -500%). }:modal-bodyadpop { padding; 20px. },modal-headeradpop. :modal-footer { padding; 10px 20px. }:modal-headeradpop { border-bottom; #eeeeee solid 1px. }:modal-headeradpop h2 { font-size; 20px. }:modal-footeradpop { border-top; #eeeeee solid 1px: text-align; center: } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id='showOnceAnHour' style='display. none'&gt; &lt;script&gt; $(document).ready(function() { setInterval(function() { $("#showOnceAnHour").fadeIn().delay(10000);fadeOut(), }; 60*60*1000); }). &lt;/script&gt; &lt;.-- Modal --&gt; &lt;div class="modaladpop" id="modal-one" aria-hidden="true"&gt; &lt;div class="modal-dialoger"&gt; &lt;div class="modal-headeradpop"&gt; &lt;h2&gt;Welcome&lt;/h2&gt; &lt;/div&gt; &lt;div class="modal-bodyadpop"&gt; &lt;p&gt;This is an Example&lt;/p&gt; &lt;/div&gt; &lt;div id="butnclose" class="modal-footeradpop"&gt; &lt;a href="#modal-one" class="btnadpop"&gt;Close&lt;/a&gt; &lt;script&gt; document.getElementById("butnclose");style.display = "none". function showStuff() { document.getElementById("butnclose");style,display = "block"; } setTimeout(showStuff, 5000); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre></div></div><p></p></div> - Show a <div> once every hour AngularJS只显示循环中的第一个日期div(更新数组对象) - AngularJS only show first date div in loop (with updating array object) div中的jQuery show数组 - jQuery show array in div 使用 ajax 每秒刷新 div 并使用现有 div 显示新 div - Refresh div every seconds with ajax and show new div with existing div jQuery after loop在每个div中显示结果 - Jquery after loop show result in every div 每y分钟显示div x秒 - show div for x seconds every y minutes
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM