마우스/마우스를 올려 이미지 변화 부모 이미지 SRC

Question

을 통해 나는 다음과 같은 문제가있다, 말할 수이 내 HTML

<ul classname='products'> 
    <li classname='product'> 
     <div classname='product_title'>Product 1</div> 
     <div classname='product_thumbnail'><img src="product1.jpg"></div> 
     <div classname='product_images'> 
     <img src="product1_image1.jpg"> 
     <img src="product1_image2.jpg"> 
     </div> 
    </li> 
    <li classname='product'> 
     <div classname='product_title'>Product 2</div> 
     <div classname='product_thumbnail'><img src="product2.jpg"></div> 
     <div classname='product_images'> 
     <img src="product2_image1.jpg"> 
     <img src="product2_image2.jpg"> 
     </div> 
    </li> 
    <li classname='product'> 
     <div classname='product_title'>Product 3</div> 
     <div classname='product_thumbnail'><img src="product2.jpg"></div> 
     <div classname='product_images'> 
     <img src="product3_image1.jpg"> 
     <img src="product3_image2.jpg"> 
     </div> 
    </li> 
</ul> 

때 나는 내가 product_image의 SRC에 product_thumbnail의 SRC를 변경하려는 product_image 이상 마우스. 매우 어려운 일이 아니다 나는 product_thumbnail는 ID I이

var $mainImage = $('#product_thumbnail'), 
    originalImageSrc = $mainImage.attr('src'); 

$('.product_images img') 
    .on('mouseover', function() { 
     var newImageSrc = $(this).attr('src'); 
     $mainImage.attr('src', newImageSrc); 
    }) 
    .on('mouseout', function() { 
     $mainImage.attr('src', originalImageSrc); 
    }); 

작업을 예를 할 수 있었던 그런

가진 하나 개의 목록 항목이있을 때 : 슬프게도 JSFiddle

나는 하나 개의 목록 항목을 해달라고을 신분증. 물론이 클래스를 사용하여이 코드를 시도하면 위의 html은 첫 번째 목록 항목의 첫 번째 product_thumbnail div에있는 첫 번째 이미지의 src를 항상 돌려 줄 것입니다.

사람들이 내 문제를 이해하고 다른 사람이 jQuery 예제 코드의 클래스 버전으로 나를 도울 수 있기를 바랍니다. 사전에

감사

Answer 1

html로는 고쳐야 첫째 - 클래스와 클래스 이름을 바꿉니다. ClassName은 HTML 클래스의 JavaScript 특성 이름입니다. HTML의 경우 jsut은 class = 'foo'를 사용합니다.

<ul class='products'> 
     <li class='product'> 
     <div class='product_title'>Product 1</div> 
     <div class='product_thumbnail'><img src="product1.jpg"/></div> 
     <div class='product_images'> 
      <img src="product1_image1.jpg"> 
      <img src="product1_image2.jpg"> 
     </div> 
     </li> 
     <li class='product'> 
     <div class='product_title'>Product 2</div> 
     <div class='product_thumbnail'><img src="product2.jpg"/></div> 
     <div class='product_images'> 
      <img src="product2_image1.jpg"> 
      <img src="product2_image2.jpg"> 
      <img src="product2_image3.jpg"> 
     </div> 
     </li> 
    </ul> 

는 그리고 JS는 이제 다음과 같습니다

$('.product_images img') 
    .on('mouseover', function() { 
     var tgt = $(this).closest(".product").find(".product_thumbnail img") 
     tgt.data("orig_src", tgt.prop("src")) 
     tgt.prop("src", $(this).prop("src")); 
    }) 
    .on('mouseout', function() { 
     var tgt = $(this).closest(".product").find(".product_thumbnail img") 
     tgt.prop("src", tgt.data("orig_src")); 
    }); 

마법은 선택입니다. 가장 가까운 것은 시작 요소에서 DOM을 찾습니다. class = product와 가장 가까운 요소를 찾습니다. 우리가 찾으면 클래스 = product_thumbnail을 가진 그 아이를 찾은 다음 그 아이 이미지를 찾습니다. 이 모두는 하나의 발생 만 있다고 가정하고, 여러 개의 히트가있을 경우이 코드가 달라집니다.

대상을 찾으면 원래의 src 값을 데이터 컬렉션에 먼저 저장 한 다음 src 값을 트리거하는 img src로 바꿉니다.

마우스가 나가면 미리보기 이미지 데이터에 저장된 src를 가져 와서 바꿉니다.