我正在尝试开发一个类似于 Netflix 的水平滚动界面
.
一切都已显示并正常工作,但由于某种原因,Javascript 仅滚动浏览索引页中的第一个出版商的书籍。当我尝试悬停和滚动任何其他 Publisher Books 时,它只会水平滚动 First Publishers Books。
我知道我的 #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。 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;
}
});
关于javascript - 将唯一 ID 传递给 Javascript 以进行水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28290487/