2017-03-24 35 views
1

我跑了兩次電話,以獲得20圖像(默認情況下谷歌只給你一個單一的電話一組10圖像)。 但是,我需要爲每個獲得的元素生成一個唯一的ID。這是我使用jQuery的,但第二組10張圖像的獲取相同的ID每上一組:如何生成唯一的ID?

function loadImage() { 
    var uniqueId = (function() { 
     var counter = 0; 
     return function(prefix) { 
      counter++; 
      return prefix ? prefix + '' + counter : counter; 
     } 
    })(); 
    // GOOGLE IMAGES FRONT 
    function createGoogleImagesLoad(initialValue) { 
     var termS;   
     termS = $("#usp-title").val(); 
     var _start = initialValue || 1; 
     var imagesCount = 10; 
     var myCx = 'MY_CX'; 
     var myKey = 'MY_KEY'; 
     var $grid = $('.grid').packery({ 
      itemSelector: '.grid-item', 
      percentPosition: true 
     }); 
     return function() { 
      $.getJSON("https://www.googleapis.com/customsearch/v1", { 
      q: termS, 
      alt: "json", 
      searchType: "image", 
      cx: myCx, 
      num: imagesCount, 
      start: _start, 
      key: myKey, 
      language: "it", 
      rights: "cc_publicdomain, cc_attribute", 
      filter: "1", 
      safe: "high", 
      imgType: "photo", 
      fileType: "jpg" 
      }, 
      function (data) { 
       $.each(data.items, function(i, item) { 
       var uniq = uniqueId('thing_'); 
       var $items = $('<div class="col-xs-12 col-md-6 grid-item">'.concat(
        '<div class="thumbnail">', 
        '<input type="checkbox" name="', uniq, '" value="valuable" id="', uniq, '" />', 
        '<label for="', uniq, '">', 
        '<img class="img-responsive" src="' + item.link + '">', 
        '</label>', 
       '</div>', 
       '</div>')); 
       $grid.append($items).packery('appended', $items); 
       $grid.imagesLoaded().progress(function() { 
       $grid.packery(); 
       $('body').on('change', '.grid .thumbnail :checkbox', function() { 
        var urls = []; 
        $(':checkbox:checked').each(function() { 
        urls.push($(this).next('label').find('img').attr('src')); 
        }); 
        var str = ''; 
        urls.forEach(function (url) { 
        str += '<div class="col-xs-12 col-md-6 grid-item"><div class="thumbnail"><img onerror="hideContainer(this)" src="' + url + '"/></div></div>'; 
        }); 
        $('#usp-custom-4').val(str); 
       }); 
       }); 
      }); 
      }); 
      _start += imagesCount; 
     } 
    } 
    var googleImagesFront = createGoogleImagesLoad(); 
    googleImagesFront(); 
} 

回答

4

你打兩次電話loadImage()?這就是問題所在,它每次都會重新生成uniqueId函數,將counter重置爲0.將uniqueId函數移到loadImage之外,它應該修復它。

+1

oh sh * t,謝謝,就是這樣。 –

1

如果你想要一個唯一的ID您可以使用此library實現標準RFC4122 ,它的使用非常簡單,你只需要添加library並選擇要生成版本的方法:

console.log('UUID v1:', uuid.v1()); 
 
console.log('UUID v4:', uuid.v4());
<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.7/uuid.min.js"></script>

+0

看到下面的正確答案,謝謝 –

+1

是的,對不起,我回答只是基於標題 – Jorius

0

當您調用該函數時,變量counter始終得到初始化。如果您將全局或外部的var counter = 0;這個變量放在函數中,那麼您應該能夠獲得唯一的ID。