如何使用同位素使用Javascript从数组中过滤单个随机图像

Question

使用同位素过滤。 http://isotope.metafizzy.co 。

如何添加过滤以仅显示随机选择的1张图像。 每次单击菜单按钮“ RANDOM”，都会显示一个新选择的随机图像。 我假设我可以使用一些JavaScript来生成一个随机数，该数字可能对应于图像类中的数字（尚未添加到代码中），但是每次单击菜单按钮时都需要重新随机化。清除，并且有足够的信息。

html

<ul id="filters">
<li class="filter"><a href="#" data-filter=".RANDOM" title="RANDOM">RANDOM</a></li>
</ul>

<div id="gallerycontainer">
    <div class="item RANDOM">
        <a href="$Link" title="$Title">
            <img src="image.jpg">
        </a>
    </div>
<div>

isotope-in​​it.js

$(window).load(function() {
var $container = $('#gallerycontainer');
// init
$container.isotope({
// options
itemSelector: '.item', 
layoutMode: 'masonry',
isOriginLeft: 'false'

});
// filter items on button click
$('#filters').on( 'click', 'a', function( event ) {
var filtr = $(this).attr('data-filter');
$container.isotope({ filter: filtr });
});
});

更新：

我有这个我认为可以使用的东西： http : //jsfiddle.net/sMu69/137/但是我不确定如何定位“数据过滤器”而不是innerHTML？

<a href="#" class="button" id="message" value="Search" data-filter="*"   
onclick="GetValue();">click</a>

function GetValue()
{
var myarray= new Array("item1","item2","item3");
var random = myarray[Math.floor(Math.random() * myarray.length)];
document.getElementById("message").innerHTML=random;
}

Answer 1

最终我找到了这个解决方案：

的HTML

<a href="#" onclick="GetValue();" id="myid" data-filter="">RANDOM</a>

<div id="gallerycontainer">
<div class="item Filter1">
    <a href="$Link" title="$Title">
        <img src="image.jpg">
    </a>
</div>
<div class="item Filter2">
    <a href="$Link" title="$Title">
        <img src="image.jpg">
    </a>
</div>
<div class="item Filter3">
    <a href="$Link" title="$Title">
        <img src="image.jpg">
    </a>
</div>    
<div>

Java脚本

function GetValue()
{
var myarray= new Array(".Filter1",".Filter2",".Filter3");
var random = myarray[Math.floor(Math.random() * myarray.length)];
document.getElementById("myid").dataset.filter = random;
}

只需为每个图像设置一个唯一的数据过滤器，然后将它们添加到数组中即可。