javascript - 使用 Javascript 切换文本颜色

标签 javascript php jquery html css

我在 php 中创建一个菜单,该菜单运行来自 JSON 文件的输入。我遇到的问题是,一旦他们单击 div 类“菜单项”中的任意位置,我希望标题将颜色更改为绿色。一旦颜色为绿色,我还希望他们能够单击它并将其恢复到原始状态。我知道我需要为此选项使用 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 toggle 会为你完成,参见 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;
}

关于javascript - 使用 Javascript 切换文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37082652/

相关文章:

javascript - Rails 中的分页 Ajax 工作不一致

javascript - Jquery 获取选中的复选框

javascript - 使用异步/等待延迟强制请求之间的时间

javascript - [jQuery]如何从 'loadedmetadata'获取视频的宽度?

php - MySql 在多列中搜索姓名和电子邮件

javascript - jQuery:不活动刷新/注销

javascript - 如何在jwplayer 6自动模式下找到质量的比特率值?

java - 如何在 Java 中循环 BasicNameValuePair

PHP 单元测试覆盖率

jQuery:如何检查鼠标是否位于元素上方