向水平滚动传递Javascript的唯一ID [英] Pass Unique-ids to Javascript for Horizontal Scrolling
问题描述
我正在开发一个水平滚动界面，类似于Netflix
。
所有内容都会正常显示并正常工作，但由于某种原因，Javascript只会滚动浏览INDEX页中的第一个出版商图书。当我尝试悬停和滚动任何其他发布商图书，它将只水平滚动第一个发布商图书。
我知道我有#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
code><％＃这会列出所有发布商％>
< div class =publisherbubble>
<％@ publishers.each do | publisher | ％>
< div class =publisherbox>
< div class =slider triangleBtns>
###呈现所有书籍
<％= render：partial => 'static_pages / books'，：locals => {：publisher =>发布商}％>
< / div>
< / div>
<％end％>
< / div>
_books.html.erb
###如何传递/使用唯一的ID或类来使这项工作？
< 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 sliderButtondata-scroll-modifier =' - 1'>
< div class =arrow>
< / div>
< / span>
< span class =next sliderButtondata-scroll-modifier ='1'>
< div class =arrow>
< / div>
< / span>
< / div>
Javascript
$（function（）{
var scrollHandle = 0，
scrollStep = 5，
###我可以传递/使用一个唯一的ID或类来使这个工作吗？
parent = $（this）.closest（'。scroll-container'）;
//开始滚动过程
$（。sliderButton）。on（mouseenter，function（）{
var data = $（this）.data（'scrollModifier'），
direction = parseInt ，10）;
$（this）.addClass（'active'）;
startScrolling（direction，scrollStep，parent）;
}）;
//停止滚动
$（。sliderButton）。on（mouseleave，function（）{
stopScrolling（）;
$（this）。 removeClass（'active'）;
}）;
//滚动的实际处理
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 -container'）
startScrolling（direction，scrollStep，parent）
另外，如果你设置 scrollStep 在顶部作为一种可配置的常量，你不需要将它作为参数传递。 startScrolling 看起来像它应该工作正常没有它。
另一方面，我可以看到 startScrolling 只接受一个参数：父div。和数据修饰符可能只是住在那里，而不必住在2个地方。您可以在 startScrolling 函数中从父级获取修饰符。
更新
$（function（）{
var scrollHandle = 0，
scrollStep = 5;
//开始滚动过程
$（。sliderButton）。on（mouseenter，function（）{
var data = $（this）。 data（'scrollModifier'），
direction = parseInt（data，10）;
$（this）.addClass（'active'）;
parent = .closest（'。scroll-container'）;
startScrolling（direction，scrollStep，parent）;
}）;
//滚动
$ .sliderButton）。on（mouseleave，function（）{
stopScrolling（）;
$（this）.removeClass（'active'）;
}）;
//滚动的实际处理
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;
}
}）;
I am trying to develop an interface that scrolls horizontally similar to Netflix
.
Everything is displayed and works properly, BUT for some reason the Javascript only scrolls through the first Publisher's Books in the INDEX PAGE. And when I try to hover and scroll any other Publisher Books, it will only Horizontally Scroll the First Publishers Books.
I know I have #scroll appearing many times which is why the jQuery only sees the first one.
Does anyone know how I can pass a unique publisher_id or class so that it will work with all the publishers?
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;
}
First, I would give the parent div a class like scroll-container.
Then, I would pass the parent div as an argument to startScrolling.
parent = $(this).closest('.scroll-container')
startScrolling(direction, scrollStep, parent)
Then, you have access to the parent and don't have to set it at the top of the js.
As an aside, if you're setting scrollStep at the top as a sort of configurable constant, you don't need to pass it in as an argument. startScrolling looks like it should work just fine without it.
As another aside, I could see startScrolling just taking one argument: the parent div. And the data-modifier could just live there instead of having to live in 2 places. And you could just get the modifier from the parent in the startScrolling function.
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;
}
});
这篇关于向水平滚动传递Javascript的唯一ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
