如何切換每個格

Question

我有撥動一個問題，我寫了一個函數，當我將鼠標懸停一些圖像，然後該圖像是變化，則點擊div顯示等圖像click:hover演技選擇之前一樣關閉顯示

這是HTML代碼

<div class="bs-example" data-example-id="simple-thumbnails"> 
          <div class="row"> 
           <div class="col-xs-6 col-md-4 thumbnail"> 
            <img class="intro_ezer" 
             src="/img/intro_ezer_main.png" 
             data-holder-rendered="true"display:block;"> 

           </div> 
           <div class="col-xs-6 col-md-4 thumbnail"> 
            <img class="intro_coloris" 
             src="/img/intro_coloris_main.png" 
             data-holder-rendered="true"display:block;"> 

           </div> 
           <div class="col-xs-6 col-md-4 thumbnail"> 
            <img class="intro_galaxia" 
             src="/img/intro_galaxia_main.png" 
             data-holder-rendered="true"display:block;"> 

           </div> 

          </div> 
          <div class="row"> 
           <div class="col-xs-12 col-md-3 intro_ezer_detail intro"> 
            <img class="intro_margot_main" 
             src="/img/intro_ezer.jpg"> 
           </div> 
           <div class="col-xs-12 col-md-3 intro_coloris_detail intro"> 
            <img class="intro_nanobuble" 
             src="/img/intro_ezer.jpg"> 
           </div> 
           <div class="col-xs-12 col-md-3 intro_galaxia_detail intro"> 
            <img class="intro_teatoxy" 
             src="/img/intro_ezer.jpg"> 
           </div> 


          </div> 
          <div class="row"> 
           <div class="col-xs-6 col-md-4"> 
            <img 
             class="intro_margot" src="/img/intro_margot_main.png" 
             data-holder-rendered="true"display:block;"> 

           </div> 
           <div class="col-xs-6 col-md-4"> 
            <img 
             class="intro_nanobuble" 
             src="/img/intro_nanobuble_main.png" 
             data-holder-rendered="true"display:block;"> 

           </div> 
           <div class="col-xs-6 col-md-4"> 
            <img class="intro_teatoxy" 
             src="/img/intro_teatoxy_main.png" 
             data-holder-rendered="true"display:block;"> 

           </div> 


          </div> 

          <div class="row detail"> 
           <div class="col-xs-12 col-md-3 intro"> 
            <img src="/img/intro_ezer.jpg"> 
           </div> 
           <div class="col-xs-12 col-md-3 intro_nanobuble_detail intro"> 
            <img src="/img/intro_ezer.jpg"> 
           </div> 
           <div class="col-xs-12 col-md-3 intro_teatoxy_detail intro"> 
            <img src="/img/intro_ezer.jpg"> 
           </div> 


          </div> 
         </div> 

的JavaScript

var className = ""; 
var toggleImg = ""; 
$('div').find('img').hover(function() { 

    className = $(this).attr('class'); 
    this.src = '/img/' + className + '_hover.png'; 

}, function() { 
    this.src = '/img/' + className + '_main.png'; 

}).click(function(e) { 
    toggleImg = className + "_detail"; 
    e.preventDefault(); $('.intro').hide() 

    $("."+className+"_detail").show(); 

}) 

我該怎麼辦？

Answer 1

您應該使用。每個

檢查下面的例子。

HTML：

<div> 
    <img alt="chrome" src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300"> 
</div> 
<div> 
    <img alt="firefox" src="https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg"> 
</div> 

JS：

$('div img').each(function() { 
    $(this).click(function() { 
     alert($(this).attr('alt')); 
    }); 
});