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

【问题标题】：Hide all images inside DIV except one without scrollbars隐藏 DIV 中的所有图像，除了没有滚动条的图像
【发布时间】：2011-12-18 22:38:43
【问题描述】：

我有一个 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>");

        });    
    });

【问题讨论】：

如何确定要显示的图像？按 ID？
我需要上传的第一张或最后一张图片。如果我要显示另一个 div，它会相互附加。所以我想隐藏除一个之外。如果我使用 append这个问题，我不确定如何使用 Asp.Net Image 控件来显示它的 URL。
你说你使用的是asp.net。您是否有无法控制在服务器端显示哪些图像的原因？如果没有，只要每个图像都有一个您在运行时知道的唯一类或 ID，您就可以使用 JQuery 隐藏/显示，如下面的回答。
是的，有一个原因，一旦用户上传图像，所有图像都会上传到 div 容器中，假设如果他点击图像，那么图像应该能够显示在图像控件中。如果我使用上面显示的附加，即使在图像控件中也会显示所有图像所以我需要显示第一个上传的图像或最后一个图像。

标签： asp.net css image html hide

【解决方案1】：

可能是这样的：

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

【讨论】：

同样什么都没有显示，所有的都在隐藏。
第二行不应该是 $('#showfilelist div:eq(0)').show(); ?否则，您只是匹配容器 div。

【解决方案2】：

我会这样做：

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

（其中 file.id 是您想要显示的一张图片的 id。）

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

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

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

【讨论】：

现在什么都没有显示！甚至是缩略图。
在调用第二行之前确保 file.id 设置为正确的值。第一行隐藏了所有的拇指。第 2 行仅显示您想要显示的那一行。
id 不需要设置，因为它是使用 plupload.js 脚本预定义的