2012-10-03 75 views
-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')); 
      } 
     }); 
+1

这个问题大声呼救小提琴。 –

回答

0

如果我在一个错误我不是,你创建的HTML代码与JS脚本,因为所有的HTML代码是查看。所以你必须退出图像格式的HTML代码,并在需要时使用脚本。

我会做一些功能来显示每个图像,然后使用切换显示替代每一个。它不是随机的,但它几乎是,你只需要选择一个随机数,这将是第一个,并与另一个随机数的增量来寻找下一个图像。

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

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

这将在你的HTML所有的 “P” 的对象中运行,如$( “P”)让。