2012-10-03 5 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-кода формы изображений и сделать это, когда вам нужно со сценарием.

Я бы сделал некоторые функции, чтобы показать каждое изображение, а затем использовать toggle, чтобы показать альтернативу каждому из них. Это не случайно, но это почти так, и вам нужно выбрать только случайное число, которое будет первым, а с другим случайным числом - прирост для поиска следующего изображения.

Пример того, как УСО тумблер использовать альтернативные функции:

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

Это будет работает со всеми «р» объектов в HTML, так как $ («р») делает.

Смежные вопросы