将 Unique-ids 传递给 Javascript 以实现水平滚动

我正在尝试开发一个类似于 Netflix 的水平滚动界面

.

一切都显示并正常工作，但由于某种原因，Javascript 只滚动浏览索引页面中的第一个出版商书籍。当我尝试悬停和滚动任何其他出版商书籍时，它只会水平滚动第一出版商书籍。

我知道 #scroll 出现了很多次，这就是为什么 jQuery 只看到第一个。

有谁知道我如何传递唯一的publisher_id或类，以便它可以与所有发布商一起使用？

Models

class Publisher < ActiveRecord::Base

  has_many :characters
  has_many :books, :through => :characters

end


class Character < ActiveRecord::Base

  belongs_to :publisher
  has_many :books

end

class Book < ActiveRecord::Base

  belongs_to :character

end

Views

books.html.erb

  <%# This lists all the publishers %>
  <div class="publisherbubble">

    <% @publishers.each do |publisher| %>

      <div class = "publisherbox">
        <div class = "slider triangleBtns">

          ###renders all the books
          <%= render :partial => 'static_pages/books', :locals =>{:publisher => publisher} %>

        </div>  
      </div>

    <% end %>

  </div>

_books.html.erb

  ###How can I pass/use a unique ID or class to make this work?
  <div class="scroll-container">

      <ul class="scrollertitle">     

        <% publisher.characters.sort_by{|character| character.created_at }.each do |character|%>
          <% character.books.each do |book| %>
            <li>
              <%= link_to (image_tag book.photo(:small)), 
                  publisher_character_book_issues_path(:publisher_id => publisher.id, 
                  :character_id => character.id, :book_id => book.id ) %>
            </li>
          <% end %>
        <% end %>

      </ul>

      <span class="previous sliderButton" data-scroll-modifier='-1'>
        <div class="arrow">
        </div>
      </span>

      <span class="next sliderButton" data-scroll-modifier='1'>
        <div class="arrow">
        </div>
      </span>

  </div>

JavaScript

$(function () {

    var scrollHandle = 0,
        scrollStep = 5,

        ###How can I pass/use a unique ID or class to make this work?
        parent = $(this).closest('.scroll-container');

    //Start the scrolling process
    $(".sliderButton").on("mouseenter", function () {
        var data = $(this).data('scrollModifier'),
            direction = parseInt(data, 10);

        $(this).addClass('active');

        startScrolling(direction, scrollStep, parent);
    });

    //Kill the scrolling
    $(".sliderButton").on("mouseleave", function () {
        stopScrolling();
        $(this).removeClass('active');
    });

    //Actual handling of the scrolling
    function startScrolling(modifier, step, parent) {
        if (scrollHandle === 0) {
            scrollHandle = setInterval(function () {
                var newOffset = parent.scrollLeft() + (scrollStep * modifier);

                parent.scrollLeft(newOffset);
            }, 10);
        }
    }

    function stopScrolling() {
        clearInterval(scrollHandle);
        scrollHandle = 0;
    }

});

CSS

.scroll-container {
  width:auto;
  height: 100%;
  background: transparent;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  margin-top: 5px;
}

首先，我会给父 div 一个像这样的类scroll-container.

然后，我将父 div 作为参数传递给startScrolling.

parent = $(this).closest('.scroll-container')
startScrolling(direction, scrollStep, parent)

然后，您就可以访问父级，而不必将其设置在js的顶部。

顺便说一句，如果你要设置scrollStep在顶部作为一种可配置常量，您不需要将其作为参数传递。startScrolling看起来没有它应该可以正常工作。

另一方面，我可以看到startScrolling仅采用一个参数：父 div。还有data-modifier可以只住在那里，而不必住在两个地方。你可以从父级获取修饰符startScrolling功能。

Update

$(function () {

    var scrollHandle = 0,
        scrollStep = 5;

    //Start the scrolling process
    $(".sliderButton").on("mouseenter", function () {
        var data = $(this).data('scrollModifier'),
            direction = parseInt(data, 10);

        $(this).addClass('active');
        parent = $(this).closest('.scroll-container');
        startScrolling(direction, scrollStep, parent);
    });

    //Kill the scrolling
    $(".sliderButton").on("mouseleave", function () {
        stopScrolling();
        $(this).removeClass('active');
    });

    //Actual handling of the scrolling
    function startScrolling(modifier, step, parent) {
        if (scrollHandle === 0) {
            scrollHandle = setInterval(function () {
                var newOffset = parent.scrollLeft() + (scrollStep * modifier);

                parent.scrollLeft(newOffset);
            }, 10);
        }
    }

    function stopScrolling() {
        clearInterval(scrollHandle);
        scrollHandle = 0;
    }

});