0

我在以下页面上有一个 javascript 滑块：crothersenvironmental.com/crothers/index.html，它不断将其下方的相关段落文本发送到屏幕一侧。您可以在右侧的滑块下方看到它。单击滑块上方的相关数字后，每次单击数字时，您都会看到文本向右移动，直到它们从屏幕上移出并消失。此外，一旦您单击#1，页脚就会向上移动，然后在您单击任何其他数字后又向下移动。

任何帮助、想法或方向都会非常有帮助。首先十分感谢。

这是我正在使用的 js 脚本：

$('#recentprojects li a').click(function() {

var $this = $(this);

if ( !$this.parent('li').hasClass('selected') ) {

    var url = this.href,
        height = $('#recentworkimage img').css('height');

    $this
      .parents('ol')
      .find('li.selected')
        .removeClass('selected');

    $this.parent('li').addClass('selected');

    $('#recentworkimage')
      .css('height', height)
      .children('img')
        .fadeOut(1000, function() {
            $(this).attr('src', url).load(function() {
                $(this).fadeIn(1000);
            });

        $this.parents('#recentprojects')
          .find('p:last')
            .empty()
            .html('<p>' + $this.attr('title') + '</p>');
    });

}

return false;

});

4

2 回答 2

0

我认为问题在于：

$this.parents('#recentprojects')
      .find('p:last')
        .empty()
        .html('<p>' + $this.attr('title') + '</p>');

您将文本添加到p导致一种递归行为的最后一个标签中。每次添加新p标签时，它都会成为最后一个p.

执行此操作的另一种方法可能是：

$this.parents('#recentprojects')
      .find('p:last')
        .remove()
        .html('<p>' + $this.attr('title') + '</p>');

remove 方法应该删除旧的并用新的替换它。

希望这可以帮助

编辑 -

其实你可以这样做.find('p:last').html('yada yada yada');

于 2012-06-05T15:15:51.357 回答
0

首先，您不需要在设置新的 HTML 字符串之前清空元素，因为.html()已经替换了整个内容。您的字幕越来越向右移动的原因是因为您正在<p>递归地添加元素。

尝试以下操作：

$this.parents('#recentprojects')
    .find('p:last')
    .html($this.attr('title'));

虽然在这种情况下（当您查找唯一 ID 时）您可以像这样简化：

$('#recentprojects')
    .find('p:last')
    .html($this.attr('title'));

或者，如果这是<p>您在该元素中唯一拥有的，您可以进一步减少：

$('#recentprojects p')
    .html($this.attr('title'));

如果您想在页面加载时使用 JavaScript 更新字幕，请添加以下内容：

$(document).ready(function () {
    var projects = $('#recentprojects');
    projects
        .find('p:last')
        .html(projects
            .find('a:first')
            .attr('title'));
});
于 2012-06-05T15:18:01.077 回答