javascript - 如何禁用重复图像的显示？

Question

这是一个脚本，用于收集从 wordpress 管理面板上传到页面的所有图像并将它们放入 slider 中。

<div id="slider-box">
  <div id="current">

  </div>
  <div id="all-photos">

  </div>
</div>

Javascript

function setCurrent(first) {
    $('#current').html(first);
}

$(document).ready(function () {
    // set images to preview and remove big images
    $('#content').find('img').each(function () {

        var photoSrc = $(this).attr('src'),
            photoImg = '<img src="' + photoSrc + '">';

        $('#all-photos').append('<div class="photo-template">' + photoImg + '</div>');
        $(this).remove();
    }); // end each


    // set first image preview to current box 
    var firstPhoto = $('#all-photos').find('div.photo-template:first').html()
    setCurrent(firstPhoto);

    // click handler
    $('div.photo-template').on('click', function () {
        var selected = $(this).html();
        setCurrent(selected);
    });
});

效果很好，当我向页面添加几张照片时(例如 http://beardhouse.com.ua/knizhka-divan/millenium )，但是当我只添加一张照片时 - 它会复制到带有小图像的框中(例如 http://beardhouse.com.ua/beskarkasnue-mjagkie-divany/lado ) 如何在页面上只有一张图片时禁止显示重复图片？

Answer 1

尝试将此添加到您的 Javascript 中，它应该会在底部找到图像的数量，然后如果发现多于 1 个，则会移除容器。

if($('#all-photos .photo-template img').length < 2) {
    $('#all-photos').hide();
}

希望这对您有所帮助。