軌的jQuery懸停在li元素到poplulate另一個DIV

更新：我工作的一些jQuery的，看起來像這樣：軌的jQuery懸停在li元素到poplulate另一個DIV

$(document).ready(function(){ 
    $('li img').hover(
     var src = $(this).attr('src') 
     function(){ 
      $('#big').html('<img src=' + src + '/>'); 
     }, 
     function(){ 
      $('#big').html(""); 
     } 
     ); 
});

那沒有工作......但是這確實：

$(document).ready(function(){ 
    $('#li img').hover(

     function(){ 
      $('#big').html('<img src=' + $(this).attr("src") + '/>'); 
     }, 
     function(){ 
      $('#big').html(""); 

     } 

     ); 


});

但src變量的用法不正確。我也試圖把它變成一個數組或散列來迭代。最終，大框會遍歷縮略圖，如果用戶將鼠標懸停在列表元素上，它將停止迭代並顯示列表項的大版本懸停。首先需要讓這部分工作！

謝謝！

我有一個包含縮略圖的列表。當你在縮略圖上移動時，我想另一個div顯示全屏圖像。我在最乾淨的方式上有點撕裂。我會最後發佈我的醜陋解決方案，但首先我想展示我想要去的方向。

HTML：

<ul> 
    <li><%= image_tag('rails.png') %>Some text</li> 
    <li><%= image_tag('rails.png') %>Some text</li> 
    <li><%= image_tag('rails.png') %>Some text</li> 
</ul> 
<div id='big'></div>

所以第一關斷;縮略圖和文字將會改變。我試圖使用形式的jQuery：

$('li').hover(function(){ 

$('#big').append("<img src="'+ this.img.src + '" />"); 
});

this.img.src是在那裏我失敗了。

工作的解決方案在我看來是非常醜陋的，它使用的HTML，如：

<ul> 
    <li><a href='assets/rails.png"><%= image_tag('rails.png') %>Some text</a></li> 
    <li><a href='assets/rails.png"><%= image_tag('rails.png') %>Some text</a></li> 
    <li><a href='assets/rails.png"><%= image_tag('rails.png') %>Some text</a></li> 
</ul> 
<div id='big'></div>

jQuery的，如：

$("#big").append("<p id='preview'><img src='"+ this img.src +"' alt='Image preview' />"+ c +"</p>");

我還沒有足夠的發佈工作解決方案正常工作的;這足以讓任何人瞭解這個想法。

那麼如何清理垃圾？我想使用第一個沒有鏈接標籤的HTML（我不覺得這是必要的）。我甚至希望用ruby遍歷圖像目錄來生成列表。

感謝您提供的任何方向。

來源

2012-10-18 twinturbotom

您可以簡單地更改img標籤的src attr，但每次更改圖片時都需要加載圖片。

<ul> 
    <li><a onclick="$('#bigPic').attr({'src':'someothepic1.png'});">Some text</a></li> 
    <li><a onclick="$('#bigPic').attr({'src':'someothepic2.png'});">Some text</a></li> 
    <li><a onclick="$('#bigPic').attr({'src':'someothepic3.png'});">Some text</a></li> 
</ul> 
<div id='big'>*<img id="bigPic" scr="somepic.png"/>*</div>

還有其他的方式，更加重了，這樣做的複雜，但這種oneliner做前人的精力在trick.If你只有幾個事先知情同意，你可以加載他們，隱藏的，只顯示你想要的。

btw .append（）將添加到內容中，因爲.html（）將替換它。

來源

2012-10-18 20:37:34

感謝。 html（）提醒和潛在解決方案。我認爲有一個更優雅的數組或哈希來實現這一點。我會編輯我的原稿，並可能包含您推薦的一些內容。謝謝！ – twinturbotom

我覺得錨是一個好東西，它們允許等同的功能，即使JavaScript是關閉（或如果事情造成它打破），有助於建立良好的回退

來源

2012-10-18 20:43:18

軌的jQuery懸停在li元素到poplulate另一個DIV

回答

相關問題