Php 使用单选按钮显示特定图像

我使用echo在两个不同的目录（一个包含连帽衫，一个包含T恤衫）中显示和添加所有图像的类名。我想有单选按钮，点击时，只显示特定的类（例如，如果你点击T恤，它只显示T恤）

                <input id="all"         type="radio" name="category">           <label for="all">All</label>                <br/>
                <input id="hoodies"     type="radio" name="category"/>          <label for="hoodies">Hoodies</label>        <br/>
                <input id="teeshirts"   type="radio" name="category">           <label for="teeshirts">Teeshirts</label>    <br/>

                <!-- Images -->
                <?php
                    // Teeshirts
                    $dir    = 'images/clothing/hoodies/small/';
                    $files = scandir($dir);
                    $images = array();
                    foreach($files as $file) {
                      if(fnmatch('*.png',$file)) {
                        $images[] = $file;
                      }
                      if(fnmatch('*.jpg',$file)) {
                        $images[] = $file;
                      }
                    }

                    foreach($images as $image) {
                      echo '<img src="images/clothing/hoodies/small/'.$image.'"width="15%" height="20%" hspace="2%" vspace="2%" class="hoodie" data-big="images/clothing/hoodies/large/'.$image.'" />';
                      // echo '<p>'.$image.'</p>';
                    }

                    // Hoodies
                    $dir    = 'images/clothing/teeshirts/small/';
                    $files = scandir($dir);
                    $images = array();
                    foreach($files as $file) {
                      if(fnmatch('*.png',$file)) {
                        $images[] = $file;
                      }
                      if(fnmatch('*.jpg',$file)) {
                        $images[] = $file;
                      }
                    }

                    foreach($images as $image) {
                      echo '<img src="images/clothing/teeshirts/small/'.$image.'" width="15%" height="20%" hspace="2%" vspace="2%" class="teeshirt" data-big="images/clothing/teeshirts/large/'.$image.'" />';
                    }                           
                ?>

现在它的工作方式是，如果你点击T恤，不要显示连帽衫（只显示T恤）。但现在这根本不起作用（以前我硬编码每幅图像时是这样，但现在我使用php时不是这样）。我如何才能让它起作用？我如何才能写得更好（因此它只显示一个类，而不是不显示另一个）

我也不知道如何让“全部”按钮工作

#teeshirts:checked ~ .teeshirt {
 display: none;
}

#hoodies:checked ~ .hoodie {
   display: none;
}

---

这是一个处理原始数据的快速解决方案，您可以轻松使用PHP

HTML代码

<div>
    <label><input type="radio" name="colorRadio" value="red"> red</label>
    <label><input type="radio" name="colorRadio" value="green"> green</label>
    <label><input type="radio" name="colorRadio" value="blue"> blue</label>
</div>
<div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
<div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>

<style type="text/css">
.box{
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>

红色
绿色
蓝色
您选择了红色单选按钮，所以我在这里
您选择了绿色单选按钮，因此我在这里
您选择了蓝色单选按钮，所以我在这里

CSS代码

<div>
    <label><input type="radio" name="colorRadio" value="red"> red</label>
    <label><input type="radio" name="colorRadio" value="green"> green</label>
    <label><input type="radio" name="colorRadio" value="blue"> blue</label>
</div>
<div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
<div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>

<style type="text/css">
.box{
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>

.盒子{
填充：20px；
显示：无；
边缘顶部：20px；
边框：1px实心#000；
}
.red{背景：#ff0000；}
.green{背景：#00ff00；}
.blue{背景：#0000ff；}

也试试这个脚本

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
    if($(this).attr("value")=="red"){
        $(".box").not(".red").hide();
        $(".red").show();
    }
    if($(this).attr("value")=="green"){
        $(".box").not(".green").hide();
        $(".green").show();
    }
    if($(this).attr("value")=="blue"){
        $(".box").not(".blue").hide();
        $(".blue").show();
    }
});
});
</script>

$（文档）.ready（函数（）{
$（'input[type=“radio”]”）。单击（函数（）{
如果（$（此）.attr（“值”）=“红色”）{
$（“.box”）.not（“.red”）.hide（）；
$（“.red”）.show（）；
}
如果（$（this.attr（“值”）=“绿色”）{
$（“.box”）.not（“.green”）.hide（）；
$（“.green”）.show（）；
}
如果（$（this.attr（“值”）=“蓝色”）{
$（“.box”）.not（“.blue”）.hide（）；
$（“.blue”）.show（）；
}
});
});

这是一个处理原始数据的快速解决方案，您可以轻松使用PHP

HTML代码

<div>
    <label><input type="radio" name="colorRadio" value="red"> red</label>
    <label><input type="radio" name="colorRadio" value="green"> green</label>
    <label><input type="radio" name="colorRadio" value="blue"> blue</label>
</div>
<div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
<div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>

<style type="text/css">
.box{
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>

红色
绿色
蓝色
您选择了红色单选按钮，所以我在这里
您选择了绿色单选按钮，因此我在这里
您选择了蓝色单选按钮，所以我在这里

CSS代码

<div>
    <label><input type="radio" name="colorRadio" value="red"> red</label>
    <label><input type="radio" name="colorRadio" value="green"> green</label>
    <label><input type="radio" name="colorRadio" value="blue"> blue</label>
</div>
<div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
<div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>

<style type="text/css">
.box{
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>

.盒子{
填充：20px；
显示：无；
边缘顶部：20px；
边框：1px实心#000；
}
.red{背景：#ff0000；}
.green{背景：#00ff00；}
.blue{背景：#0000ff；}

也试试这个脚本

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
    if($(this).attr("value")=="red"){
        $(".box").not(".red").hide();
        $(".red").show();
    }
    if($(this).attr("value")=="green"){
        $(".box").not(".green").hide();
        $(".green").show();
    }
    if($(this).attr("value")=="blue"){
        $(".box").not(".blue").hide();
        $(".blue").show();
    }
});
});
</script>

$（文档）.ready（函数（）{
$（'input[type=“radio”]”）。单击（函数（）{
如果（$（此）.attr（“值”）=“红色”）{
$（“.box”）.not（“.red”）.hide（）；
$（“.red”）.show（）；
}
如果（$（this.attr（“值”）=“绿色”）{
$（“.box”）.not（“.green”）.hide（）；
$（“.green”）.show（）；
}
如果（$（this.attr（“值”）=“蓝色”）{
$（“.box”）.not（“.blue”）.hide（）；
$（“.blue”）.show（）；
}
});
});

用户在选择单选按钮时无法访问图像，或者仅仅是一个隐藏图像就足够了，这很重要吗？因为我看到了您的PHP标记，但在这种情况下不需要PHP。我真的不明白您的意思。我使用PHP是为了一次添加整个目录，而不是为了eac而不得不执行一百万次h个人图像。用户在选择单选按钮时不能访问图像，或者仅仅是一个隐藏的图像就足够了，这很重要吗？因为我看到了你的PHP标记，但在这种情况下不需要PHP。我真的不明白你的意思。我使用PHP是为了一次添加整个目录，而不是像百万吨一样每个图像的IME。