我可以使用javascript从类别中提取图像吗？_Javascript_Php_Jquery_Html_Json

我可以使用javascript从类别中提取图像吗？

javascript php jquery html json

我可以使用javascript从类别中提取图像吗？,javascript,php,jquery,html,json,Javascript,Php,Jquery,Html,Json,拉取已分类的视频或图像的最佳方式是什么是否可以将值写入数组（例如：景观、技术、摘要等）。。然后，当用户选择输入时，他们会得到属于该类别的项目，或者我需要使用PHP或JSON来有效地编写类似的内容吗我正在尝试做的是创建一个页面，该页面将随机排列阵列中的图像/视频。用户在访问页面时将能够从下拉列表中选择一个类别，并且随机化器将仅随机化带有该类别标记的图像，并一次显示一个如果未选择任何类别，则将从视频总量中随机选择我目前的代码是为视频设置的，但图像/视频是相同的概念 <hea

拉取已分类的视频或图像的最佳方式是什么

是否可以将值写入数组（例如：景观、技术、摘要等）。。然后，当用户选择输入时，他们会得到属于该类别的项目，或者我需要使用PHP或JSON来有效地编写类似的内容吗

我正在尝试做的是创建一个页面，该页面将随机排列阵列中的图像/视频。用户在访问页面时将能够从下拉列表中选择一个类别，并且随机化器将仅随机化带有该类别标记的图像，并一次显示一个

如果未选择任何类别，则将从视频总量中随机选择

我目前的代码是为视频设置的，但图像/视频是相同的概念

    <head>
        <title>Randomizer</title>
    </head>

    <body> 

         <section>

          <div class="desktop">
            <video loop autoplay>

              <source src="" type="">
              <source src="" type="">
              Your browser does not support the <code>video</code> element.
            </video>
          </div> 

        </section>

    </body>

</html>

JavaScript

var videos = [
    [{type:'mp4', 'src':'/videos/1.webm'}, {type:'webm', 'src':'/videos/1.mp4'}],
    [{type:'mp4', 'src':'/videos/2.webm'}, {type:'webm', 'src':'/videos/2.mp4'}],
    [{type:'mp4', 'src':'/videos/3.webm'}, {type:'webm', 'src':'/videos/3.mp4'}],
    [{type:'mp4', 'src':'/videos/4.webm'}, {type:'webm', 'src':'/videos/4.mp4'}],
    [{type:'mp4', 'src':'/videos/5.webm'}, {type:'webm', 'src':'/videos/5.mp4'}], 

];



$(function() {
    $('section').on('click', 'div', function(e) {
    var number = Math.floor(Math.random()*videos.length);
    $(this).find('source').each(function(index){ 
          videoSrc = videos[number][index].src;
          $(this).attr('src', videoSrc);
          $('video').load();
          $('video').play();
        });
    });
}); 


$(document).ready(function() { 
    var number = Math.floor(Math.random()*videos.length); 
     $(this).find('source').each(function(index){ 
          videoSrc = videos[number][index].src;
          $(this).attr('src', videoSrc);
          $('video').load();
          $('video').play();
        });
     }
);

非常感谢任何帮助或见解！谢谢大家

如果我正确理解了任务，那么您要实现的目标是：

视频

json数组

var视频=[
{category:'landscape'，sources:[{type:'webm'，src:'/videos/1.webm'}，{type:'mp4'，src:'/videos/1.mp4'}]}，
{category:'landscape'，sources:[{type:'webm'，src:'/videos/2.webm'}，{type:'mp4'，src:'/videos/2.mp4'}]}，
{category:'landscape'，sources:[{type:'webm'，src:'/videos/3.webm'}，{type:'mp4'，src:'/videos/3.mp4'}]}，
{category:'technology'，sources:[{type:'webm'，src:'/videos/4.webm'}，{type:'mp4'，src:'/videos/4.mp4'}]}，
{category:'technology'，sources:[{type:'webm'，src:'/videos/5.webm'}，{type:'mp4'，src:'/videos/5.mp4'}]}，
{category:'technology'，sources:[{type:'webm'，src:'/videos/6.webm'}，{type:'mp4'，src:'/videos/6.mp4'}]}，
{category:'abstract'，sources:[{type:'webm'，src:'/videos/7.webm'}，{type:'mp4'，src:'/videos/7.mp4'}]}，
{category:'abstract'，sources:[{type:'webm'，src:'/videos/8.webm'}，{type:'mp4'，src:'/videos/8.mp4'}]}，
{category:'abstract'，sources:[{type:'webm'，src:'/videos/9.webm'}，{type:'mp4'，src:'/videos/9.mp4'}]}，
{category:'abstract'，sources:[{type:'webm'，src:'/videos/10.webm'}，{type:'mp4'，src:'/videos/10.mp4'}]}，
{category:'abstract'，sources:[{type:'webm'，src:'/videos/11.webm'}，{type:'mp4'，src:'/videos/11.mp4'}]}
];

此数组将按类别进行筛选

var类别='technology'；//从下拉列表中选择类别
var videosByCategory=videos.filter（函数（视频）{
返回video.category==类别；
});

然后使用一些洗牌算法，就像这里的一样

函数洗牌（数组）{
var currentIndex=array.length，temporaryValue，randomIndex；
//虽然还有一些元素需要洗牌。。。
而（0！==currentIndex）{
//选择剩余的元素。。。
randomIndex=Math.floor（Math.random（）*currentIndex）；
currentIndex-=1；
//并将其与当前元素交换。
临时值=数组[currentIndex]；
数组[currentIndex]=数组[randomIndex]；
数组[randomIndex]=临时值；
}
返回数组；
}

最后的条件是什么

var shuffledVideos=shuffle（videosByCategory.length>0？videosByCategory:videos）；

从闭包中删除

.on（）

，并将其添加到

$（文档）。准备好了吗！谢谢你的回复。有一件事我不确定。HTML在这上面会是什么样子？另外，我是否可以用您展示的代码替换所有当前的javascript，这样就可以了？或者我必须保留当前的javascript，以用于点击和加载随机函数？@h0bb5欢迎！我在答案中加上了一个工作点-请看一看。虽然我不确定你想通过显示列表中的视频实现什么。啊，太棒了！那几乎是完美的！是的，我试图实现的只是随机显示一个生成的视频或图像，然后单击它将从所选类别中随机显示。我可以做些什么改变来实现这一点？谢谢你的帮助，我一定投你一票@h0bb5，谢谢！我更新了plunk，您可以在视频视图中使用任何html模板，例如，一旦选定，就可以播放视频。我不明白尽管点击部分-还需要一个随机的吗？：）对点击部分只需再随机一次。因此，基本上，div或section将被包装在一个标记中，一旦单击了该部分，就会出现一个随机化，但只会出现在所选类别中：）感谢您的帮助！一旦完成，这将是我遇到的所有问题