显示来自 MySQL 的数据，用于通过 jQuery 动态更改内容答案

【问题标题】：Display data from MySQL to be used to dynamically change content through jQuery显示来自 MySQL 的数据，用于通过 jQuery 动态更改内容
【发布时间】：2013-03-16 22:12:24
【问题描述】：

我正在尝试通过 MySQL/PHP 和 jQuery 动态读取和显示菜单及其内容。我已检索到菜单名称并在页面上正确显示。

  $select_service_name = "SELECT serv_name FROM services";
    $query =  $conn->query($select_service_name);

foreach ($query->fetchAll(PDO::FETCH_COLUMN) as $row) {
    echo '<li><a href="#">'. $row; '</a></li>';
 }

但现在我想填写服务描述，显示第一个读入的，但将其余的存储在具有

的 div 中

 display: none;

所以我可以使用 jQuery UI 根据用户点击的服务来隐藏/显示服务描述。

关于如何实现这一点的任何建议？

谢谢。

我有一个菜单：

ServiceName1 | ServiceName1 Description
ServiceName2 |
ServiceName3 |

等，并使用 jQuery .show() .hide() 我希望能够根据单击的 servicename# 显示每个描述。如何使用从 MySQl 表中读取的描述来执行此操作？

【问题讨论】：

使用jQuery函数.show()和.hide()?
是的，但是我如何存储我想要在 MySQL 中显示和隐藏的数据，然后根据他们选择的菜单项显示它（也已从 mysql 中读取）
也许您可以更具体地提出问题。恐怕我不太明白这个问题。
更新了我的问题，好些了吗？
MySql 部分、HTML 部分或 JS 部分有问题吗？

标签： jquery mysql dynamic

【解决方案1】：

做这样的事情： PHP：

foreach ($query->fetchAll(PDO::FETCH_COLUMN) as $row) {
   echo '<li class="row"><a href="#">' . $row . '</a><span class="description">' . $description . '</span></li>';
}

CSS：

.description{
  display: none;
}

jQuery:

$(document).ready(function() {
  $(".row a").click(function(e) {
    e.preventDefault();
    $(".description").hide();
    $(this).parent("li").find(".description").show();
   });
});

http://jsfiddle.net/jdfqS/2/

你也不需要 jQuery UI 来做这个.. 只需要 jQuery

【讨论】：

【解决方案2】：

我建议使用 JSON 将数据存储在数据属性中。在 PHP 中，将您需要的数据放入对象或数组中。然后使用json_encode将其格式化为JSON字符串：

<div data-example='<?php echo json_encode($data); ?>'></div>

您可以通过JSON.parse或jQuery.parseJSON检索数据：

$('[data-example]').each(function() {
    var data = $(this).attr('data-example');
    if (data) { 
        data = $.parseJSON(data);
    }
    // ...
});

【讨论】：