将唯一ID传递给Javascript以进行水平滚动

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

.

一切都会显示并正常运行,但是由于某种原因,Javascript只滚动了索引页中的第一本出版商书.当我尝试悬停并滚动其他任何出版商书籍时,它只会水平滚动第一个出版商书籍.

我知道我#scroll出现了很多次,这就是jQuery只看到第一个的原因.

有谁知道我如何传递唯一的Publisher_ID或类,以便它可以与所有发布者一起使用?

楷模

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

查看

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.数据修改器可以只住在那里,而不必住在两个地方.您可以在startScrolling函数中从父级获取修饰符.

更新

$(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;
    }

});

转载注明原文:将唯一ID传递给Javascript以进行水平滚动 - 代码日志