2017-03-24 31 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。