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();
});

Answer 2

一般来说，据我所知，来自php的代码不会对来自外部调用的脚本产生任何影响。因此，尝试在锚点中使用onclick并尝试运行它。

赞<a href="#" onclick="sample (this);"></a>

function sample (id) {
// Now do whatever here.

return false; // To prevent default action.
}

Answer 3

尝试使用.delegate()函数jQuery。

这将事件绑定到现在和将来的元素。

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

jquery点击显示div

3 个答案: