php - jquery 点击显示 div

Question

我有一个 php 页面，它将解析一些数据并最终得到一个数据数组。我想将每个键放在其自己的 div 中，以便用户可以单击单独的导航面板并显示正确的 div。

 $array = array('userId'=>'bob1','firstName'=>'bob','lastName'=>'Jones');

我有一个处理点击的小 jquery。

 $('.nav').click(function()
  {
            $('.userModule').hide();
            var id = $(this).attr('id');
            $('#'+id).show();
 });

所以我交互并设置所有字段:

  $data = "";
  foreach ($array as $key => $value)
  {
      $data .= "<div id='" . $key . "' class='userModule'>";
      $data .= $key . "," . $value;
      $data .= "</div>";
    $navMenu[] = $key;
   }

还有我的小导航面板:

 echo "<div id='navMenu'>\n";
 foreach ($navMenu as $v)
 {
    echo "<a href='#' id='" . $v . "' class='nav'>" . $v . "</a><br>\n";
 }
 echo "</div>\n";

然后:

 echo $data;

我这样做是因为我希望导航菜单位于左侧，而 div 位于中间。我通过设置 css navMenu 来做到这一点:

 #navMenu{
    float:left;
    clear:both;
  }
  .userModule{
    float:left;
  }

我遇到的问题是，如果我点击一个链接，什么也没有发生。我可以通过回显 foreach 循环中的数据而不是将其设置为 $data 来解决这个问题。问题是导航菜单不会在数据的左边....

Answer 1

多次使用 id 不好。 试试这个:

HTML :

<a href='#' data-id='" . $v . "' class='nav'>" . $v . "</a>

js:

$('body').on('click', '.nav',  function() {
    $('.userModule').hide();
    var id = $(this).data('id');
    $('#'+id).show();
});