单击div时显示图像

Question

当我点击在div中的小图像时，我想要显示一个大图像。我已经在jQuery上尝试过了，但是不起作用。我哪里做错了？

<script>
$( document ).ready(function() {
    $('#imgVieuw').hide();

    $('.click').click(function(){
        var element = $(this).attr('id');
        var element2 = element;
        element = "#" + element2;
        var bigimg = "#v" + element2;
        $('#vincent, element').click(function() {
            console.log(element+" "+bigimg);
            $('#imgVieuw, bigimg').fadeIn();
        });
    });

    $('#closeButton').click(function() {
        $('#imgVieuw, .img').fadeOut();
    });
});
</script>

<section id="vincent">
    <div class='click' id="img1"><img src="images/vincent/tumb city.png"></div>
    <div class='click' id="img2"><img src="images/vincent/tumb city2.png"></div>
    <div class='click' id="img3"><img src="images/vincent/tumb eye.png"></div>
    <div class='click' id="img4"><img src="images/vincent/tumb island.png"></div>
    <div class='click' id="img5"><img src="images/vincent/tumb planet.png"></div>
    <div class='click' id="img6"><img src="images/vincent/tumb tiger.png"></div>
    <div class='click' id="img7"><img src="images/vincent/tumb white tiger.png"></div>
</section>
<div id="imgVieuw">
    <img class="img" id="vimg1" src="images/vincent/city.jpg">
    <img class="img" id="vimg2" src="images/vincent/city2.jpg">
    <img class="img" id="vimg3" src="images/vincent/eye.jpg">
    <img class="img" id="vimg4" src="images/vincent/island.jpg">
    <img class="img" id="vimg5" src="images/vincent/planet.jpg">
    <img class="img" id="vimg6" src="images/vincent/tiger.jpg">
    <img class="img" id="vimg7" src="images/vincent/white tiger.jpg">
</div>

你可以在我的演示网页上找到一个例子，然后点击按钮vincent：http://vwdemo.comxa.com/parallax在那里你可以找到我的缩略图。

提前谢谢。

Answer 1

你可以大大简化你的代码：

$(document).ready(function () {

     $('.click').click(function () {
         var bigimg = '#v' + this.id;
         $('#imgVieuw').find(bigimg).fadeIn();
     });

     $('#closeButton').click(function () {
         $('#imgVieuw .img').fadeOut();
     });
 });

请注意，$('#imgVieuw, bigimg')没有任何意义，因为它应该类似于$('#imgVieuw').find(bigimg).fadeIn();

此外，您永远不应该在其他单击事件处理程序中绑定单击事件，这样您就会得到绑定到同一元素的一堆处理程序。

演示：http://jsfiddle.net/w0mzhL8a/