Question

我有一个div容器，我正在显示多个图像，现在我只需显示一个图像并隐藏其余图像。

那我该怎么做？

这是我的容器：

  <script type="text/javascript">
    // Convert divs to queue widgets when the DOM is ready
    $(function () {
        $("#uploader").plupload({
            // General settings
            runtimes: 'gears,flash,silverlight,browserplus,html5',
            url: 'Final.aspx',
            max_file_size: '10mb',
            max_file_count: 25,
            chunk_size: '1mb',
            unique_names: true,

            // Resize images on clientside if we can
            //                    resize: { width: 320, height: 240, quality: 90 },

            // Specify what files to browse for
            filters: [
        { title: "Image files", extensions: "jpg,gif,png" },
        { title: "Zip files", extensions: "zip" }
    ],

            // thumbnails
            thumb: { width: 100, height: 100, quality: 90 },

            // Flash settings
            flash_swf_url: 'js/plupload.flash.swf',

            // Silverlight settings
            silverlight_xap_url: 'js/plupload.silverlight.xap'
        });


        // Client side form validation
        $('form').submit(function (e) {
            var uploader = $('#uploader').plupload('getUploader');

            // Files in queue upload them first
            if (uploader.files.length > 0) {
                // When all files are uploaded submit form
                uploader.bind('StateChanged', function () {
                    if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                        $('form')[0].submit();
                    }
                });

                uploader.start();
            }
            else
                alert('You must at least upload one file.');

            return false;
        });
        var uploader = $('#uploader').plupload('getUploader');
        uploader.bind('FileUploaded', function (up, file, res) {

            $('#showfilelist').append("<div id=" + file.id + " class='thumb'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='50' height='50'/></a></div>");

        });    
    });

Answer 1

我会做这样的事情：

$(".thumb").hide();
$("#" + file.id).show();

（其中file.id是您想要显示的一个图像的ID。）

如果您只想显示第一个拇指，请执行以下操作：

$(".thumb").hide();
$(".thumb:first").show();

要显示最后一个拇指，只需使用“：last”选择器而不是“：first”。

Answer 2

可能是这样的：

$('#showfilelist div').hide(); // Hide all appended divs
$('#showfilelist div').eq(0).show(); // Show the first one

隐藏DIV中的所有图像，除了没有滚动条的图像

2 个答案: