javascript - 如何切换每个div

Question

我有一个关于切换的问题，我写了一个函数，当我将鼠标悬停在一些图像上时，该图像会发生变化，然后单击 div 将显示其他图像 click:hover Action 与选中前关闭显示相同

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

你应该使用.each

检查下面的示例。

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