how to toggle each div

Question

I have a question for toggle, I wrote a function which when I hover some image then that image was change and click then div will display and other image click:hover acting is same close display before selected

this is html code

<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();

})

How can I do?

Answer 1

You should use .each

Check the example below.

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'));
    });
});