jquery，將當前項目移動到頂部

我遇到的問題是，如果第四個項目有一個很長的描述，它切斷，因爲它下面#features（由於我的設計與溢出嚴格高：隱藏jquery，將當前項目移動到頂部

我希望是有人會對如何使當前所選項目的建議，以移動到頂部

下面是一個例子網址：forums.wuggawoo.co.uk/example .php基本上它應該從項目1，項目2，項目3，項目4開始，項目1顯示其描述.5秒鐘後，訂單應該是項目2，項目3，項目4，項目1，項目2將顯示其描述。 5秒後，訂單應爲項目3，項目4，項目1，項目2與第3項顯示其描述等等等等的代碼，我剛剛更新我張貼的鏈接，還挺做，但由於某種原因，第一幾圈

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript" src="/library/jquery/1.4.js"></script> 
<script> 

var Model = {} 
jQuery(function(){ Model.FeatureBar.init(jQuery('.features')) }); 

Model.FeatureBar = { 
     current:0, 
     items:{}, 
     init: function init(options){ 

      var me = this; 
      me.triggers = [] 
      me.slides = [] 
      this.container = jQuery('#features'); 

      jQuery('.feature').each(function(i){ 
       me.triggers[i] = {url: jQuery(this).children('.feature-title a').href, title: jQuery(this).children('.feature-title'),description:jQuery(this).children('.feature-description')} 
       me.slides[i] = {image: jQuery(this).children('.feature-image')} 
      }); 

      for(var i in this.slides){ 
       this.slides[i].image.hide(); 
       this.triggers[i].description.hide(); 
      } 
      Model.FeatureBar.goToItem(0); 
      setInterval(function(){Model.FeatureBar.next()},5000); 
     }, 
     next: function next(){ 
      var i = (this.current+1 < this.triggers.length) ? this.current+1 : 0; 
      this.goToItem(i); 
     }, 
     previous: function previous(){ 
      var i = (this.current-1 > 1) ? this.current-1 : this.triggers.length; 
      this.goToItem(i); 
     }, 
     goToItem: function goToItem(i) { 
      if (!this.slides[i]) { 
       throw 'Slide out of range'; 
      } 
      this.triggers[this.current].description.slideUp(); 
      this.triggers[i].description.slideDown(); 

      this.slides[this.current].image.hide(); 
      this.slides[i].image.show(); 

      this.current = i; 
     }, 
} 
</script> 
</head> 

<body> 

<div id="features"> 
      <div class="feature current"> 
         <div style="display: none;" class="feature-image"> 
       <a href="google.com"><img src="/design/images/miss.png"></a> 
      </div> 
      <h2 class="feature-title"><a href="google.com">Item 1</a></h2> 
      <p style="display: none;" class="feature-description"><a href="google.com">Item 1 description</a></p> 
     </div> 

      <div class="feature"> 
          <div class="movie-cover"> 
        <a href="/movie/movie"><img src="/image2.png" alt="" title=""></a> 
       </div> 
         <div style="display: block;" class="feature-image"> 
       <a href="/rude/movie"><img src="/images/Featured/rude.png"></a> 
      </div> 
      <h2 class="feature-title"><a href="/rude/movie">Item 2</a></h2> 

      <p style="display: block;" class="feature-description"><a href="/rude/movie">Item 2 description</a></p> 
     </div> 
      <div class="feature"> 
         <div style="display: none;" class="feature-image"> 
       <a href="/pis/movie"><img src="/image3.png"></a> 
      </div> 
      <h2 class="feature-title"><a href="/pis/movie">Item 3</a></h2> 
      <p style="display: none;" class="feature-description"><a href="/pis/movie">Item 3 description</a></p> 

     </div> 
      <div class="feature"> 
         <div style="display: none;" class="feature-image"> 
       <a href="what.com"><img src="/images/Featured/indie.png"></a> 
      </div> 
      <h2 class="feature-title"><a href="what.com">Item 4</a></h2> 
      <p style="display: none;" class="feature-description"><a href="what.com">Item 4 description</a></p> 

     </div> 
    </div> 


</body> 
</html>

來源

2010-05-22 azz0r

爲什麼你使用jQuery？ – 2010-05-22 10:14:58

????爲什麼不？？？？ – azz0r 2010-05-22 11:24:01

因爲它在這裏沒有做任何事情。如果我運行你的代碼，我得到以下錯誤：'ReferenceError：找不到變量：Model'。所以這裏缺少一些東西。如果我們無法重現您的問題，這將非常困難！而你的意思是「它切斷，因爲它低於#features」 – jigfox 2010-05-22 11:32:24

我建議你這樣做後得到升技消息：

$('.feature-description').each(function (i,n){ 
    var parent = $(n).closest('.feature'); 
    $(n).prependTo(parent); 
});

這將把每個「功能描述」放在父母的開始/頂部「.feature」在哪裏把代碼？那麼它取決於你想要它改變地方。

如果你想在頁面加載。然後把它放在你的初始化函數...

希望它有幫助

來源

2010-05-22 13:54:33 Val

你會把它放在哪裏？基本上，例如：項目1在那裏開始，5秒鐘後，項目2向上滾動，然後項目3，然後是項目4.然而由於設計限制，框的高度切斷了項目4s的描述。我想要的是當前正在循環顯示並移動到頂部的項目。 – azz0r 2010-05-22 17:18:06

發佈一個鏈接到頁面...所以我可以看到它是如何工作的... – Val 2010-05-23 10:55:30

它可能更容易將代碼粘貼到一個html文件中，並將jquery 1.4的副本放在 – azz0r 2010-05-23 11:07:12

jquery，將當前項目移動到頂部

回答

相關問題