随机选择内存

时间:2012-10-03 07:25:23

标签: jquery html

我想在列表中添加更多图像,随机选择一定数量的图像。就像现在一样,然后所有图像都显示在列表中。 知道我怎么能这样做吗?

这是HTML中的列表

<div id="sample">

    <!-- start: Memory Lætt -->
    <div class="kvilt-memory-game">
        <ul>
            <!-- back image (must be the first item) -->
            <li><img title="Click to reveal" src="img/back.png" /></li>
            <!-- match image (must be the second item) -->
            <li><img title="Match made" src="img/matched.jpg" /></li>               
            <!-- image figures (add as many as you want) -->
            <li><img id="ID01" title="Figure 01" src="img/ficard01.png" /></li>
            <li><img id="ID02" title="Figure 02" src="img/ficard02.png" /></li>
            <li><img id="ID03" title="Figure 03" src="img/fucard01.png" /></li>
            <li><img id="ID04" title="Figure 04" src="img/fucard02.png" /></li>


      </ul>
    </div>

这是我执行的脚本

/* plugin methods */
var methods =
{

    /* intialization */
    init : function(options)
    {

        /* settings */
        var settings = 
        { 
            spacing: 10, /* space between items */
            columns: 4 /* number of columns */
        };
        return this.each(function()
        {

            var self = $(this), data = self.data('data');
            if(!data)
            {

                /* overwrite default settings */
                if (options && $.isPlainObject(options)) $.extend(settings, options);

                /* get unordered list */
                var list = self.find('ul').first();

                /* get images data */
                var datBack, datMatch, datFigs = [], numFigs, imgEl;
                list.find('img').each(function(i)
                {
                    imgEl = $(this);                        
                    if (i == 0) { datBack = { src: imgEl.attr('src'), title: imgEl.attr('title') }; }
                    else if (i == 1) { datMatch = { src: imgEl.attr('src'), title: imgEl.attr('title') }; }
                    else { datFigs.push({ src: imgEl.attr('src'), id: imgEl.attr('id'), title: imgEl.attr('title') }); }
                });
                datFigs = datFigs.concat(datFigs);
                numFigs = datFigs.length;

                /* init data */
                self.data('data',
                {
                    target: self, 
                    list: list,
                    settings: settings,                     
                    datBack: datBack,
                    datMatch: datMatch,
                    datFigs: datFigs,
                    numFigs: numFigs,
                    itmData: null, 
                    busy: false,
                    events: { init: $.Event('init'), match: $.Event('match'), done: $.Event('done'), reveal: $.Event('reveal'), fail: $.Event('fail') },
                    stats: { numClicks: 0, time: 0 },
                    matchCount: 0
                });

                /* generate items */
                methods._generate.call(self, self.data('data'));
            }
        });

1 个答案:

答案 0 :(得分:0)

如果我没有犯错,你必须使用JS脚本创建html代码,因为所有的html代码都是可见的。因此,您必须从html代码中退出图像,并在需要时使用脚本进行创建。

我会制作一些函数来显示每个图像,然后使用切换来显示每个图像。它不是随机的,但它几乎是你只需选择一个随机数,这将是第一个,而另一个随机数则是增量来寻找下一个图像。

如何切换以使用替代功能的示例:

$("p").toggle(function(){
alert("You've activated the first function now");
},function(){
alert("Now it's the second one");
});

这将与html中的所有“p”对象一起运行,如$(“p”)所示。