Question

我正在运行两次谷歌调用以获得20张图片（谷歌默认情况下只为一次通话提供一组10张图片）。但是，我需要为每个元素生成一个唯一的id。这是我正在使用的jQuery，但第二组10个图像获得与前一组相同的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();
}

Answer 1

您是否两次致电loadImage()？这就是问题所在，它每次都会重新生成uniqueId函数，将counter重置为0.将uniqueId函数移到loadImage之外，它应该修复它。

Answer 2

如果您想要一个唯一ID ，您可以使用实现标准library的RFC4122，它的使用非常简单，您只需要添加{{3}并选择要生成的版本的方法：

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>

Answer 3

当您调用函数时，变量counter总是被初始化。如果您在全局或函数外部放置var counter = 0;此变量，那么您应该能够获得唯一ID。

如何生成唯一ID？

3 个答案: