我可以創建一次只顯示一個子列表的交互式列表嗎？

爲我的網站，我試圖創建一個藝術家列表。當用戶點擊名稱時，我想顯示一個曲目列表。當用戶點擊軌道時，顯示視頻。這是可能的HTML？我對js知之甚少。我已經花了幾個小時，並沒有能夠得到任何工作。我可以創建一次只顯示一個子列表的交互式列表嗎？

在此先感謝！

來源

2014-01-12 Joe Brewer Jr.

讓我們看看你有什麼嘗試。 – drip

是的。有可能的。 – manta

@drip我剛放棄並刪除了我的嘗試。我現在所有的都是一個沒有格式化的長列表。 –

我會用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應該包含有關視頻的信息。

這種方法要求你在數據庫中的所有數據（表名和字段名稱可能不同）

我覺得這是最常見的做法。

祝你好運！

來源

2014-01-12 09:50:08 Curious

我可以創建一次只顯示一個子列表的交互式列表嗎？

回答

相關問題