Question

我在我的函数中使用类，因为我想复制我的块。我想把（这个）放在函数中但是因为我使用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;
            }
        }
    });
});

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

Answer 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/

Answer 2

以下是您要求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);
});

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

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

Answer 3

这样做的方法是将最近的.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/

将其插入函数jquery中

3 个答案: