2012-10-18 3 views
0

업데이트를 poplulate하는 리튬 요소를 통해 JQuery와 호버 레일다른 사업부

작동하지 않았다
$(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을 사용하고 싶습니다 (필자는 필요 없다고 생각합니다). 루비를 사용하여 이미지 디렉토리를 통해 반복 목록을 생성하는 방법을 찾고 있습니다.

어떤 방향 으로든지 제공해 주셔서 감사합니다.

답변

0

img 태그의 src 속성을 간단히 변경할 수는 있지만 사진을 변경할 때마다 사진을로드해야합니다.

<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> 

가이 일을 다른 방법으로, 더 무거운, 복잡한입니다,하지만 당신은 단지 몇 그림이있는 trick.If을 sould이 oneliner, 당신은 숨겨진, 그들 모두를로드하고 단지 당신이 원하는 것을 보여줄 수 .

btw .append()는 .html()이 콘텐츠를 대체하므로 콘텐츠에 ADD를 추가합니다.

+0

감사하게 될 때 그들은 심지어 동일한 기능을 허용, 앵커가 가지고 좋은 일이 생각합니다. html() 알림 및 잠재적 솔루션 나는 더 우아한 배열이나 해시가 일어나는 것을 생각한다. 내 원본을 편집하고 내가 추천 한 것을 통합 할 수 있습니다. 감사! – twinturbotom

0

나는 자바 스크립트가 꺼져 (또는 무언가가 부러 원인이있는 경우), 좋은 가을 백에 대한 대한