Question

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

Netflix 。

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

我知道我的#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可以住在那里，而不是住在2个地方。你可以从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;
    }

});

将Unique-id传递给Javascript以进行水平滚动

1 个答案: