-1

我想将更多图像添加到列表中，它会随机选择一定数量的图像。就像现在一样，所有图像都显示在列表中。知道我该怎么做吗？

这是 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'));
            }
        });
4

1 回答 1

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") 所做的那样。

于 2012-10-03T07:42:16.730 回答