Question

对于我的网站，我正在尝试创建一个艺术家列表。当用户点击我想要显示曲目列表的名称时。当用户点击某个曲目时，会显示一个视频。这可能在HTML中吗？我知道的很少js。我已经花了几个小时在这上面并且无法正常工作。

提前致谢！

Answer 1

我会用AJAX来做。

假设你有这样的HTML代码：

<div id="artists">
    <div class="artist" data-art-id="1">Artist name 1</div>
    <div class="artist" data-art-id="2">Artist name 2</div>
    <div class="artist" data-art-id="3">Artist name 3</div>
</div>
<div id="tracks"></div>
<div id="video"></div>

然后你必须使用白色jQuery代码：

$(function() {
    $('.artist').click(function() {
        var artId = $(this).attr('data-art-id');
        $('#tracks').load('/get_tracks_list.php?art_id=' + artId, function() {
            $('.track').click(function() {
                var trackId = $(this).attr('data-track-id');
                $('#video').load('/get_video.php?track_id=' + trackId);
            });
        });
    });
});

您的get_tracks_list.php应该是这样的：

<?php

mysql_connect(YOUR_HOST, YOUR_LOGIN, YOUR_PASS);
mysql_select_db(YOUR_DB);

$artId = intval($_GET['art_id']);   //prevent SQL injection
$res = mysql_query('SELECT track_id, track_name FROM tracks WHERE art_id="'.$artId.'"');
while ($track = mysql_fetch_assoc($res)) {
    echo '<div class="track" data-track-id="'.$track['track_id'].'">'.htmlspecialchars($track['track_name']).'</div>';
}

get_video.php应包含有关视频的信息。

这种方法要求您拥有DB中的所有数据（表名和字段名称可能不同）

我认为这是最常见的做法。

祝你好运！

我可以创建一次只显示一个子列表的交互式列表吗？

1 个答案: