Question

我有这行代码，当用户点击链接时，页面应向下滚动到相应的锚点。

原来它只适用于第一个链接。其他人只是解雇了这个例外

Uncaught TypeError: Cannot read property 'slice' of undefined

这是代码

的jQuery

$(document).on('click','#scrollTo',function(){

                var to = $(this).attr('class');
                //alert(to);
                //This allways print the correct class name

                $(window).scrollTo('div #'+to,'1000');


            });

PHP

<ul id="source">
            <?php 
            $sourceRCS = $source->getAllSources();
            foreach($sourceRCS as $src)
            {
                echo '<li data-value="'.$src->name.'"><a href="#" id="scrollTo" class="'.$src->name.'">'.$src->name.'</a></li></a>';
            }

            ?>
    </ul>
foreach($sourceRCS as $src)
{


       echo '
    <div class="custom-label-src">
         <div id="'.$src->name.'" class="span12 label-title-src">
            '.$src->name.'
         </div>
    </div>';

}

我做错了什么？

提前谢谢

Answer 1

ID应该是唯一的，但是你重复#scrollTo。尝试使用CSS类作为目标。

Answer 2

var to = $(this).attr('class');
$(window).scrollTo('div #'+to,'1000');

您正在选择一个类并将其指定为“to”。然后你拿上课并将它转换成下一行的ID。

你的选择器应该是这样的：

var to = $(this).attr('class');
$(window).scrollTo('div .' + to,'1000');

Answer 3

Html Id必须是唯一的。像之前建议的那样，尝试使用类。此外，尝试捕获事件目标并滚动到它：

$(document).click(function(evt){
   var target = evt.target;
   $(window).scrollTo(target, 1000);
});

但是，这会滚动到用户点击的所有内容。更好的解决方案是仅在要滚动到的锚标记上设置单击事件处理程序：

$("#source a").click(function(evt){
   evt.preventDefault();
   var target = $(evt.currentTarget);
   $(window).scrollTo(target, 1000);
   // More code here...
});

scrollTo只适用于第一个链接

3 个答案: