我正在php中创建一个菜单,运行来自JSON文件的输入。我遇到的问题是,一旦他们单击div类"menu item"中的任何位置,我希望标题的颜色变为绿色。一旦颜色是绿色,我也希望他们能够点击它,让它恢复到原来的状态。我知道我需要使用javascript或Jquery来实现这个选项,但在任何文档中都找不到。我觉得我错过了一些小东西,找遍了所有的东西,但都没能弄清楚。任何帮助都将不胜感激。
foreach ($obj as $menu_item) {
echo '<div class="menu-item">';
echo '<img class="food-item" src="'.$menu_item->{'image-url'}.'"><br/>';
echo '<p class="title" onclick="changeColor("title"); return false;">'.$menu_item->name.'</p><br/>';
echo '$'.$menu_item->price.'<br/>';
echo $menu_item->Description.'<br/>';
echo '</div>';
}
Jquery切换将为您完成此操作,请参阅fiddle:https://jsfiddle.net/c259LrpL/24/
$(".menu-item").click(function() {
$(this).toggleClass("red");
});
CSS示例:
.menu-item {
background-color: blue;
color: white;
}
.menu-item.red {
background-color: red;
color: blue;
}