Rails 5：使用link_来定位mp3（作为模型对象）以及具有相同对象不同属性的单独div吗？

Question

This is a bit complicated. Not sure if it's even possible. I'll try to explain as best as possible, just ask if something seems confusing.

I am designing a page for a band's album. The mp3s are uploaded to an S3 bucket and are also saved in the RoR database as a model object. The model attributes include: title and lyrics.

I'm designing the site with three Bootstrap columns. The left one holds the track list with all of the songs looped and linked to a jQuery mp3 player when one is clicked. The middle column holds the album's cover. For the right column, I'd like to be able to display the lyrics for the song that was most recently clicked, but I am puzzled as to how to go about this.

I have tried using simple jQuery script and css to hide the div's display then change it to a block or inline display on click. This either showed all of the lyrics for every song, or else didn't work at all. I also toyed with the idea of targeting the divs with a link anchor, but I can't figure out how to implement that along with the mp3 in the same link. I suppose I could completely redesign the layout by removing the grid system and using floats and the like, but I'd prefer to avoid that if at all possible.

Can anyone think of a solution? I'm quite puzzled as to how this should work. Or should I scrap the idea altogether?

Here is my current relevant code:

<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>

Hopefully this isn't too confusing. I thought some basic javascript would do the trick, but I'm starting to wonder if it's possible at all. Or perhaps it needs to go into more advanced script. Perhaps it's as simple as creating a helper method and I'm not just seeing the clues.

Answer 1

Dynamically put the song id inside the Div class.

Div class = "<%= song.id %> "

Hide all of them by default. Show when that song id is selected.