Javascript 图像滑块将文本发送到屏幕外并显示页脚

Javascript image slider sends text off screen and brings footer up

本文关键字：屏幕 显示 图像 文本 Javascript      更新时间：2023-09-26

我有一个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;

}）;

首先，在设置新的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'));
});

我认为问题出在这一点上：

$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>');
删除方法

应删除旧的方法并将其替换为新方法。

希望这有帮助

编辑-

实际上，你可以做.find('p:last').html('yada yada yada');

相关文章：