如何遍历数据库，显示一个条目并隐藏其余条目答案

【问题标题】：how to loop through a database, show one entry and hide the rest如何遍历数据库，显示一个条目并隐藏其余条目
【发布时间】：2015-05-18 14:09:22
【问题描述】：

首先，我有 php 和 mysql 设置，我有一个名为 WPF 的数据库，一个名为 colors 的表，每个条目都有一个自动递增 1-55 的 ID 和一个颜色代码。

我想要实现的是设置一个 php 脚本来连接到数据库（我对此没有任何问题），我希望它循环遍历每种颜色，显示该颜色，隐藏其他不同的颜色颜色。

所以结果应该是这样的

（显示红色，隐藏蓝色，隐藏绿色，隐藏橙色）（隐藏红色，显示蓝色，隐藏绿色，隐藏橙色）（隐藏红色，隐藏蓝色，显示绿色，隐藏橙色）（隐藏红色，隐藏蓝色，隐藏绿色，显示橙色）

最终我会将其转换为 javascript，以便在单击按钮时显示一个 div。如果我单击红色按钮，所有其他颜色 div 都会消失。

我让 javascript 可以手动工作，但由于我有 php 和一个数据库，我认为有一种更简单的方法，而不是输入所有 55 种颜色并为每种颜色显示/隐藏函数 55 次。

onclick="
   $(\'#42B4E6\').hide();
   $(\'#D2D6D9\').hide();
   $(\'#002B7A\').show();"

'\' 对我有用，因为我有 php 回显它。有人知道我怎么能在 php 中正确吐出这个吗？前三个按钮在这里工作，但我不想手动输入 https://www.dudermang.com/cfaulk/wpf4

<?php
echo'<div class="trigger_color" id="thumbnail1"><input type="button" style="background:#002B7A" id="b002B7A" onclick="$(\'#42B4E6\').hide();$(\'#D2D6D9\').hide();$(\'#002B7A\').show();"/></div>';
echo'<div class="trigger_color" id="#thumbnail2"><input type="button" style="background:#42B4E6"  onclick="$(\'#002B7A\').hide();$(\'#D2D6D9\').hide();$(\'#42B4E6\').show();"/> </div>';
echo'<div class="trigger_color" id="thumbnail3"><input type="button" style="background:#D2D6D9" onclick="$(\'#002B7A\').hide();$(\'#42B4E6\').hide();$(\'#D2D6D9\').show();"/>  </div>';
echo'<div class="trigger_color" id="thumbnail4"><input type="button"style="background:#A8A8AA"/></div>';
echo'<div class="trigger_color" id="thumbnail5"><input type="button"style="background:#F27EB2"/></div>';
echo'<div class="trigger_color" id="thumbnail6"><input type="button"style="background:black"/></div>';
echo'<div class="trigger_color" id="thumbnail7"><input type="button"style="background:#474747"/></div>';
echo'<div class="trigger_color" id="thumbnail8"><input type="button"style="background:#FE4812"/></div>';
echo'<div class="trigger_color" id="thumbnail9"><input type="button"style="background:#7C2230"/></div>';
echo'<div class="trigger_color" id="thumbnail10"><input type="button"style="background:#4089eb"/></div>';

echo'<div class="trigger_color" id="thumbnail11"><input type="button"style="background:#54565B"/></div>';
echo'<div class="trigger_color" id="thumbnail12"><input type="button"style="background:#5C4A3B"/></div>';
echo'<div class="trigger_color" id="thumbnail13"><input type="button"style="background:#B2BC00"/></div>';
echo'<div class="trigger_color" id="thumbnail14"><input type="button"style="background:#EBBECB"/></div>';
echo'<div class="trigger_color" id="thumbnail15"><input type="button"style="background:#6241"/></div>';
echo'<div class="trigger_color" id="thumbnail16"><input type="button"style="background:#5E8AB4"/></div>';
echo'<div class="trigger_color" id="thumbnail17"><input type="button"style="background:#892034"/></div>';
echo'<div class="trigger_color" id="thumbnail18"><input type="button"style="background:#AA1054"/></div>';
echo'<div class="trigger_color" id="thumbnail19"><input type="button"style="background:#2D1B46"/></div>';
echo'<div class="trigger_color" id="thumbnail20"><input type="button"style="background:#3B5E75"/></div>';


echo'<div class="trigger_color" id="thumbnail21"><input type="button"style="background:#CC092F"/></div>';
echo'<div class="trigger_color" id="thumbnail22"><input type="button"style="background:#18453B"/></div>';
echo'<div class="trigger_color" id="thumbnail23"><input type="button"style="background:#FFB300"/></div>';
echo'<div class="trigger_color" id="thumbnail24"><input type="button"style="background:#253355"/></div>';
echo'<div class="trigger_color" id="thumbnail25"><input type="button"style="background:#007E3A"/></div>';
echo'<div class="trigger_color" id="thumbnail26"><input type="button"style="background:#A59D87"/></div>';
echo'<div class="trigger_color" id="thumbnail27"><input type="button"style="background:#55BE47"/></div>';
echo'<div class="trigger_color" id="thumbnail28"><input type="button"style="background:#8CB4E8"/></div>';
echo'<div class="trigger_color" id="thumbnail29"><input type="button"style="background:#4E2029"/></div>';
echo'<div class="trigger_color" id="thumbnail30"><input type="button"style="background:#3A4C00"/></div>';

echo'<div class="trigger_color" id="thumbnail31"><input type="button"style="background:#F3ECE6"/></div>';
echo'<div class="trigger_color" id="thumbnail32"><input type="button"style="background:#A3D869"/></div>';
echo'<div class="trigger_color" id="thumbnail33"><input type="button"style="background:#FF1CAC"/></div>';
echo'<div class="trigger_color" id="thumbnail34"><input type="button"style="background:#E9E73F"/></div>';
echo'<div class="trigger_color" id="thumbnail35"><input type="button"style="background:#D5C4A1"/></div>';
echo'<div class="trigger_color" id="thumbnail36"><input type="button"style="background:#FF9C71"/></div>';
echo'<div class="trigger_color" id="thumbnail37"><input type="button"style="background:#38B8FF"/></div>';
echo'<div class="trigger_color" id="thumbnail38"><input type="button"style="background:#502D7F"/></div>';
echo'<div class="trigger_color" id="thumbnail39"><input type="button"style="background:#FF585E"/></div>';
echo'<div class="trigger_color" id="thumbnail40"><input type="button"style="background:#006F44"/></div>';

echo'<div class="trigger_color" id="thumbnail41"><input type="button"style="background:#D00063"/></div>';
echo'<div class="trigger_color" id="thumbnail42"><input type="button"style="background:#7566A0"/></div>';
echo'<div class="trigger_color" id="thumbnail43"><input type="button"style="background:#385E9D"/></div>';
echo'<div class="trigger_color" id="thumbnail44"><input type="button"style="background:#1D4F91"/></div>';
echo'<div class="trigger_color" id="thumbnail45"><input type="button"style="background:#948771"/></div>';
echo'<div class="trigger_color" id="thumbnail46"><input type="button"style="background:#E8FF6B"/></div>';
echo'<div class="trigger_color" id="thumbnail47"><input type="button"style="background:#FF6C3B"/></div>';
echo'<div class="trigger_color" id="thumbnail48"><input type="button"style="background:#89A386"/></div>';
echo'<div class="trigger_color" id="thumbnail49"><input type="button"style="background:#47C7C7"/></div>';
echo'<div class="trigger_color" id="thumbnail50"><input type="button"style="background:#D4D4E0"/></div>';

echo'<div class="trigger_color" id="thumbnail51"><input type="button"style="background:#FF7900"/></div>';
echo'<div class="trigger_color" id="thumbnail52"><input type="button"style="background:#A7192D"/></div>';
echo'<div class="trigger_color" id="thumbnail53"><input type="button"style="background:#FFFFFF"/></div>';
echo'<div class="trigger_color" id="thumbnail54"><input type="button"style="background:#5E2751"/></div>';
echo'<div class="trigger_color" id="thumbnail55"><input     type="button"style="background:#FFE000"/></div>';

?></div>
<div align="center">
</div>
</section>
</body>
</html>

【问题讨论】：

标签： javascript php

【解决方案1】：

您尝试隐藏或显示的id 无效：你的 id 是，它在 div 而不是 input：

thumbnail1
thumbnail2

不是：

#42B4E6
#D2D6D9

如果您想根据颜色隐藏块，例如创建一个data-color 属性，并将颜色添加到创建的数据中，并在您的代码中：

$('div').find(input[data-color='#42B4E6']).hide();

【讨论】：