尝试使用PHP / Javascript构建一个可点击的索引,该索引显示单击的每个项目的数据


Trying to build a clickable index with PHP / Javascript that displays data for each item clicked

我花了很多时间在网上寻找帮助,但我还没有找到任何可以满足我正在寻找的东西,并且试图从多个来源拼凑解决方案,基本上已经陷入了死胡同。

我正在尝试做的是创建一个网页,在页面的一部分列出音乐家,以便我可以单击单个音乐家的名字并在同一页面的另一部分加载他们的专辑、歌曲、歌词等列表。数据全部在MySQL数据库中,数据库中的每个项目都有一个唯一的ID。

我可以将数据从数据库中获取到一个数组中,如果我手动设置 ID,我可以在页面的单独部分创建音乐家列表以及他们的信息列表。如果我能点击返回 ID,那么我就可以专注于尝试使用 Ajax 加载所需的数据,我想 JQuery 会在页面上的我想要它的位置显示它,但我坚持让可点击列表工作。

我正在使用Joomla 3.1来创建网站,但代码只是PHP和Javascript。

我最近的努力如下:

<ul id="nav" style="list-style:none">
<?php
    foreach ( $this->items as $item ) {
       echo '<li id='.$item->itemid.' onclick="$(this).index()" >'.$item->title.'</li>';
    }   
?> 
"</ul>" 
<script>
    linkClicked = function (index) {
       alert($('#nav li').get(index).id);
    }

像我所有其他的努力一样,这创建了一个不错的列表,但是当我单击任何列出的项目时,没有任何反应,而且我显然偏离了轨道。 我原本打算显示一个警报,显示所选项目的 ID,但没有出现警报。 我有一种感觉,解决方案非常微不足道,但我只是没有得到它,任何帮助将不胜感激。

对于不熟悉Joomla的人来说,它提供了将MySQL数据加载到数组中的函数,并使用数据库中相关列的名称访问单个项目。 因此,$item->title 为当前数据行提供"title"字段的值。

您需要在

文档准备就绪时触发代码。 您的代码不会触发。您需要将点击事件绑定到准备好的文档上的 li 标签,如下所示:

//on document ready
$(function(){
  //select the li tags from #nav and bind a click event to them
  $('#nav li').on('click', function(){
    //When li is clicked: alert the attribute "id" from the clicked element (this = li element)
    alert($(this).attr('id'))
  })
});

使用 Delegate:也适用于动态添加到 DOM 的元素(在页面加载之后,例如通过 ajax 调用)

$(function(){
  $('#nav').on('click', 'li', function(){
    alert($(this).attr('id'))
  })
});