簡體   English   中英

使用 forEach 在 Json 數據上使用 jquery 的隨機循環

[英]random loop with jquery on Json data using forEach

我有這段代碼,它顯示了 json 文件中的所有圖像。 有什么方法可以僅顯示 1 張圖像並隨機顯示.json 中的圖像?

我有這個代碼:

 $(document).ready(function() { $.getJSON('https://res.cloudinary.com/dkx20emez/image/list/dom.json', function(emp) { //the attribute resource is an array so you have to loop each element in it emp.resources.forEach(function(element){ var publicid = element.public_id; var format = element.format; var type = element.type; var version = element.version; $('#display').append('<img class="wrapper" src="https://res.cloudinary.com/dkx20emez/image/'+ type +'/v'+version +'/'+publicid+'.'+format +'">'); }); }); });
 **css** body { padding: 50px; }.wrapper { width: 200px; height: auto; padding: 10px; background: #eee; }.random-faces { width: 100%; max-width: 200px; height: 0; padding-bottom: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
 //css <html><head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script></head> <body> <div class="wrapper" id="display" style="background-color:#39B54A;"></div> </body> </html>

我感謝你的回答

您可以在 0 和返回數組的長度 -1 之間生成一個隨機 integer。 我在這篇文章中包含了一個執行此操作的簡單方法:

在 JavaScript 中的兩個數字之間生成隨機數

然后您可以使用該隨機 integer 作為emp.resources的索引來獲取隨機圖像。

請參見下面的片段:

(曾經知道的jQuery大部分都忘記了,所以混入了Vanilla JS)

 // Custom function to get a random integer between two numbers const randomIntFromInterval = (min, max) => Math.floor(Math.random() * (max - min + 1) + min); $(document).ready(function() { $.getJSON('https://res.cloudinary.com/dkx20emez/image/list/dom.json', function(emp) { //Get a random number between 0 and the length of the emp.resources array - 1 var index = randomIntFromInterval(0, emp.resources.length - 1) // Then just use that random number as the index of the array var element = emp.resources[index] var publicid = element.public_id; var format = element.format; var type = element.type; var version = element.version; //Create an img element const img = document.createElement(`img`); //Add in the class to the img img.classList.add(`wrapper`); //Add in the source to the img img.src = `https://res.cloudinary.com/dkx20emez/image/${type}/v${version}/${publicid}.${format}`; $('#display').append(img); }); });
 body { padding: 5px; }.wrapper { width: 200px; height: auto; padding: 10px; background: #eee; }.random-faces { width: 100%; max-width: 200px; height: 0; padding-bottom: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper" id="display" style="background-color:#39B54A;"></div>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM