使用Javascript切换文本颜色

时间:2016-05-06 23:10:43

标签: javascript php jquery html css

我在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>';
    }

1 个答案:

答案 0 :(得分:1)

Jquery切换将为您完成,请参阅小提琴: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;
}