单击div时显示图像

Question

当我点击小图像时，我想显示一个大图像。 我用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/