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

Question

我正在尝试开发一个类似于 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;
}

Answer 1

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

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

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

那么，你就可以访问父级，而不必将其设置在 js 的顶部。

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

另一方面，我可以看到 startScrolling 只接受一个参数：父 div。 data-modifier 可以住在那里，而不必住在两个地方。您可以在 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;
    }

});