Question

好的，所以我在多个目录中寻找图像，并希望根据下拉列表中的选择在div中显示这些图像。

这是我得到的......

PHP代码：

$random_dir = 'avatar/random';
$scan_random_dir = array_diff(scandir($random_dir), array('..', '.'));
$random_images = $scan_random_dir;

$christmas_dir = 'avatar/christmas';
$scan_christmas_dir = array_diff(scandir($christmas_dir), array('..', '.'));
$christmas_images = $scan_christmas_dir;

我知道这可以用不同的方式完成，但这是我知道的唯一方法。

JS代码：

$(document).ready(function () {
        $('.collection').hide();
        $('#random').show();
        $('#selectCollection').change(function () {
            $('.collection').hide();
            $('#'+$(this).val()).show();
        })
    });

HTML＆amp; PHP显示所有图像：

<div class="form-group">
                <label for="selectCollection">Choose a collection</label>               
                <select class="select select-block" name="selectCollection" id="selectCollection">
                    <option value="Random">Random</option>
                    <option value="Christmas">Christmas</option>
                    <option value="World">World</option>
                </select>
                <div class="row">
                    <div class="col-md-12">
                        <?php foreach($random_images as $random_img) { ?>
                        <!-- display collection images in a DIV -->                             
                        <div id="random" class="col-md-2 collection"><a href="#" title="<?php echo $random_img; ?>"><img src="<?php echo "$random_dir/$random_img"; ?>" class="thumbnail img-responsive danger" /></a></div>
                        <?php } ?>
                        <?php foreach($christmas_images as $chistmas_img) { ?>
                        <!-- display collection images in a DIV -->                             
                        <div id="christmas" class="col-md-2 collection"><a href="#" title="<?php echo $chistmas_img; ?>"><img src="<?php echo "$christmas_dir/$chistmas_img"; ?>" class="thumbnail img-responsive danger" /></a></div>
                        <?php } ?>                      
                    </div>
                </div>              
            </div>

编辑：我没注意到我在做什么。我在jquery之前加载脚本。它现在有效，但只显示每个文件夹中的1张图像。任何想法？

当我检查元素时，它只显示第一个设置为display: block样式的图像，其余图像设置为'display：block'。不确定为什么会发生这种情况或我如何解决。

enter image description here

有什么建议吗？

Answer 1

我认为问题在于您的选择的价值。所有值都以大写字母表示第一个字母。也许＆＃34;随机＆＃34;应该是＆＃34;随机＆＃34;。

<select class="select select-block" name="selectCollection" id="selectCollection">
    <option value="random">Random</option>
    <option value="christmas">Christmas</option>
    <option value="world">World</option>
</select>

无论如何，我在这里有一个功能性的例子：http://jsfiddle.net/svbz0L3j/2/

希望它有所帮助。

Answer 2

我能弄明白我做错了什么。我不得不使用一个类而不是id。

以下是对我的代码的更改......

在HTML中，我为每个div添加了另一个类：

<div id="random" class="col-md-2 collection random">
<div id="christmas" class="col-md-2 collection christmas">

然后将JS更改为：

<script>
    $(document).ready(function () {
        $('.collection').hide();
        $('.random').show();
        $('#selectCollection').change(function () {
            $('.collection').hide();
            $('.'+$(this).val()).show();                
        })
    });
</script>

使用类而不是id似乎可以解决问题。因为我正在使用foreach循环，所有的id都是相同的，因此它只会输出目录中的第一个img，因为id应该是唯一的。

使用javascript和php显示div与图像

2 个答案: