2012-10-03 77 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」)讓。