1

我在我的函数中使用类，因为我想复制我的块。我想把（这个）放在函数中，但是当我使用 2 个不同类的按钮时，我需要这样的东西：

 $('.scroll-down')"(THIS)".mouseenter...

这是我当前的 JS（这里是小提琴：http: //jsfiddle.net/bq7Ub/）：

$(function() {
    var ele   = $('.scroll');
    var speed = 25, scroll = 5, scrolling;


    $('.scroll-up').mouseenter(function() {
        scrolling = window.setInterval(function() {
            ele.scrollTop( ele.scrollTop() - scroll );
        }, speed);
    });


    $('.scroll-down').mouseenter(function() {
        scrolling = window.setInterval(function() {
            ele.scrollTop( ele.scrollTop() + scroll );
        }, speed);
    });


    $('.scroll-up, .scroll-down').bind({
        click: function(e) {
            e.preventDefault();
        },
        mouseleave: function() {
            if (scrolling) {
                window.clearInterval(scrolling);
                scrolling = false;
            }
        }
    });
});

我无法弄清楚如何做到这一点，请帮助。

4

3 回答 3

1

我想说，给id滚动元素一个，并使.control元素（也应该是类，因为它们不是唯一的）与那些带有data-for="the-id-of-the-scrolling-element".

<div class="scroll" id="scroll-1">
bla bla...
</div>
<div class="control" data-for="scroll-1">
   ...
</div>

并使用

// delegate handling of mouseenter for both up/down to the .control element
$('.control').on('mouseenter','.scroll-up,.scroll-down',function(){

   var targetId = '#' + $(this).closest('.control').data('for'),
       target = $(targetId),
       self = $(this),
       actualScroll = self.is('.scroll-up')?scroll*-1:scroll;

    scrolling = window.setInterval(function() {
        target.scrollTop( target.scrollTop() + actualScroll );
    }, speed);

});

用于事件处理..

演示在 http://jsfiddle.net/gaby/bq7Ub/5/

于 2013-07-03T10:35:25.017 回答
0

这是您要求http://jsfiddle.net/h5pnJ/1的功能的工作版本

<div class="scroll-container">
<div class="scroll">
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here
</div>
<div id="control">
<a href="#" class="scroll-down">Down</a> - <a href="#" class="scroll-up">Up</a>
</div>
</div>


$('.scroll-up').mouseenter(function(e) {
    scrolling = window.setInterval(function() {
        var scrollElement = $(e.target).parents('.scroll-container').find('.scroll').first();
        scrollElement.scrollTop( scrollElement.scrollTop() - scroll );
    }, speed);
});

我添加了一个容器，以便我可以获取特定于该容器的滚动元素。这可以扩展到您想要的任意数量的滚动部分，而无需编辑 js 代码。而是使用适当的容器添加 html。

还有很多方法可以做到这一点。但这是您可以用来使其正常工作的快速解决方案。

于 2013-07-03T10:15:09.673 回答
0

这样做的方法是让最接近.scroll悬停的控件。目前，您正在使用 滚动所有.scroll元素$('.scroll')。

删除var ele = $('.scroll');并添加var ele = $(this).parent().prev('.scroll');到您的事件处理程序：

$('.scroll-up').mouseenter(function () {
    var ele = $(this).parent().prev('.scroll');
    scrolling = window.setInterval(function () {
        ele.scrollTop(ele.scrollTop() - scroll);
    }, speed);
});

$('.scroll-down').mouseenter(function () {
    var ele = $(this).parent().prev('.scroll');
    scrolling = window.setInterval(function () {
        ele.scrollTop(ele.scrollTop() + scroll);
    }, speed);
});

它在这里工作：http: //jsfiddle.net/bq7Ub/4/

于 2013-07-03T10:26:15.067 回答