Javascript圖像滑塊發送文本屏幕並帶來頁腳

我有一個位於頁面上的javascript滑塊：crothersenvironmental.com/crothers/index.html不斷髮送關聯的段落文本在屏幕旁邊。您可以在滑塊下方向右看到它。一旦您單擊滑塊上方的關聯數字，您將看到每次單擊數字時文本都會向右移動，直到它們移出屏幕並消失爲止。此外，一旦您點擊＃1，頁腳就會出現，然後在您點擊其他任何數字後再向下移動。Javascript圖像滑塊發送文本屏幕並帶來頁腳

任何幫助，想法或方向將是非常有益的。首先十分感謝。

這裏是我使用js腳本：

$（ '＃recentprojects李一'）點擊（函數（）{

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;

}）;

來源

2012-06-05 David

首先，你不需要設置新的HTML字符串之前清空元素，如.html()已經替換整個內容。你的字幕越來越向右移動的原因是因爲你遞歸地添加了<p>元素。

嘗試以下操作：

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

雖然在這種情況下（如你AR查找一個唯一的ID），你可以簡化像這樣：

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

或者，如果這是唯一的<p>你在該元素內，可以進一步降低：

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

如果您想要upd在頁面加載時用JavaScript填充字幕，添加以下內容：

$(document).ready(function() { 
    var projects = $('#recentprojects'); 
    projects 
     .find('p:last') 
     .html(projects 
      .find('a:first') 
      .attr('title')); 
});

來源

2012-06-05 15:18:01 chucktator

查克託，謝謝！這工作。現在唯一的問題是，當您再次點擊＃1時，文本不會顯示。任何想法爲什麼頁腳在點擊第一個圓後突然出現？ – David

這是因爲您沒有爲第一個鏈接指定「title」屬性。我還更新了我的文章，並提供了一些可能對您有所幫助的提示。 – chucktator

aaahhh，正確，標題屬性。謝謝查克託，這完美的作品。點擊第一個圓時，頁腳移動仍然存在問題。我會深入研究，看看我能弄清楚什麼。非常感謝您的幫助，非常感謝！ – David

我認爲這個問題是這個：

$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-05 15:15:51 Brad

Javascript圖像滑塊發送文本屏幕並帶來頁腳

回答

相關問題