javascript - rails 5 : use link_to target an mp3 (as a model object) as well as a separate div with a different attribute of the same object?

Question

这有点复杂。不确定这是否可能。我会尽力解释，如果有些事情看起来令人困惑，请询问。

我正在为乐队的专辑设计页面。 mp3 上传到 S3 存储桶，并作为模型对象保存在 RoR 数据库中。模型属性包括:标题和歌词。

我正在设计包含三个 Bootstrap 列的网站。左侧包含轨道列表，其中所有歌曲都会循环播放，并在单击一首歌曲时链接到 jQuery mp3 播放器。中间一栏放着专辑的封面。对于右列，我希望能够显示最近点击的歌曲的歌词，但我很困惑如何去做。

我尝试使用简单的 jQuery 脚本和 css 来隐藏 div 的显示，然后在单击时将其更改为 block 或内联显示。这要么显示每首歌的所有歌词，要么根本不起作用。我还考虑过用链接锚定位 div 的想法，但我不知道如何在同一链接中与 mp3 一起实现它。我想我可以通过删除网格系统并使用 float 等来完全重新设计布局，但如果可能的话，我宁愿避免这种情况。

有人能想出解决办法吗？我很困惑这应该如何运作。或者我应该完全放弃这个想法？

这是我当前的相关代码:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 tracklist">
      <div id="sm2-container">
        <!-- SM2 flash goes here -->
      </div>
      <ul class="playlist">
      <% @album.songs.sort { |a,b| a.track <=> b.track }.each do |s| %>
        <li class="track-num">
          <%= link_to(s.audio.url) do %>
            <%= s.title %>
          <% end %>
        </li>
      <% end %>
      </ul>
    </div>
    <div class="col-md-4">
      <%= image_tag(@album.image.url, :class => 'album-cover') %>
    </div>
    <div class="col-md-4">
      <div class="row">

        <!-- I would like the following div to display the lyrics of the 
             most recently clicked song from the above div ('.playlist'): -->

        <div class="track-lyrics">
            <%= simple_format(@song.lyrics) %>
        </div>
      </div>
    </div>

  </div>
</div>

希望这不会太令人困惑。我认为一些基本的 javascript 就可以解决这个问题，但我开始怀疑这是否可能。或者也许需要进入更高级的脚本。也许就像创建一个辅助方法一样简单，而我不仅仅看到了线索。

Answer 1

动态地将歌曲 ID 放入 Div 类中。

Div 类 = "<%= Song.id %> "

默认情况下隐藏所有内容。当选择该歌曲 ID 时显示。