使用Javascript切换文本颜色

Toggle Text Color with Javascript

本文关键字：文本 颜色 Javascript 使用      更新时间：2023-09-26

我正在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;
}
相关文章：