Question

我正在尝试将Valums的滚动脚本（http://valums.com/scroll-menu-jquery/）合并到一个动态创建的Cycle插件分页http://www.malsup.com/jquery/cycle/pager2.html中。基本上我试图让动态分页（1,2,3 ......）滚动鼠标移动。

所以，我有原始的循环演示代码：

$（ '＃幻灯片'）。前（ ''）。循环（{ fx：'turnDown'，速度：'快'，超时：0， pager：'＃nav'，

// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
}

}）;

然后我想申请：

$（函数（）{ //获取我们的元素以便更快地访问并设置覆盖宽度 var div = $（'div＃nav'）， ul = $（'ul＃nav'）， //无序列表的左边距 ulPadding = 15;

//Get menu width
var divWidth = div.width();

//Remove scrollbars
div.css({overflow: 'hidden'});

//Find last image container
var lastLi = ul.find('li:last-child');

//When user move mouse over menu
div.mousemove(function(e){

  //As images are loaded ul width increases,
  //so we recalculate it each time
  var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

  var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
  div.scrollLeft(left);
});

}）;

问题在于：

var lastLi = ul.find（'li：last-child'）;

无法找到最后一个元素，因为所有元素都是动态创建的。任何想法如何限制脚本，以便#nav中的元素可以在mousemove上滚动？

Answer 1

我没有尝试你的代码，但jQuery应该找到你动态创建的元素，无论如何。

<div>
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
  </div>

<script>
    $("div span:last-child")
        .css({color:"red", fontSize:"80%"})
        .hover(function () {
              $(this).addClass("someclass");
            }, function () {
              $(this).removeClass("someclass");
            });

</script>

尝试动态修复此列表。

P.S。您缺少图片中的'alt'属性。

Answer 2

好的，所以我必须使用.live()，如下所示：

div.live('mousemove', function(e) {
        var lastLi = ul.find('li:last-child');
        var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
        var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
        div.scrollLeft(left);
    });

jQuery：滚动动态生成的列表项

2 个答案: