Как пропустить базу данных, показать одну запись и скрыть остальные

Question

Во-первых, у меня есть настройка php и mysql, у меня есть БД с именем WPF, таблица с именами цветов, и каждая запись имеет идентификатор auto-incrementing 1-55 и цветной код.

То, что я пытаюсь достичь, это установить скрипт php для подключения к db (у меня нет проблем с этим), и я хочу, чтобы он проходил цикл и для каждого цвета, отображал этот цвет, скрывал другие, которые не являются такого же цвета.

поэтому результаты должны выглядеть следующим образом

(показать красный, скрыть синий, скрыть зеленый, скрыть оранжевый) (скрыть красный, показать синий, скрыть зеленый, скрыть оранжевый) (скрыть красный, скрыть синий, показать Зеленый, скрыть Оранжевый) (скрыть Красный, скрыть Синий, скрыть Зеленый, показать Оранжевый)

В конечном итоге я превращу его в javascript, чтобы я мог отображать один div при нажатии кнопки. Если я нажму красную кнопку, все остальные цветовые divs исчезнут.

У меня есть javascript для работы manaully, но так как у меня есть php и база данных, я firgured там был более простой способ, чем набрать все 55 цветов и показать/скрыть функции для каждого, 55 раз.

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

Работает для меня «\», потому что Im имеет 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> 

Answer 1

id, что вы пытаетесь скрыть или показать не является действительным: Ваш идентификатор есть, и это в div не в input:

thumbnail1 
thumbnail2 

нет:

#42B4E6 
#D2D6D9 

Если вы хотите, чтобы скрыть блок в соответствии с его цветами, создать атрибут data-color, например, и добавить цвет к тому, что созданные данные, а также в коде:

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