隐藏显示 Jquery

Question

我在 Jquery 方面需要一些帮助。

我有一个 div，其中包含多个独特的图像和 ID。当我单击带有 id=image1 的图像时，我想显示带有 image1image class.

的 div 图像信息

我不想在单击 image1 时显示 image2image 和 image3image classes。

<style>
body{

    width:100%;
    height:100%;
    margin:0px;
}

.imagecontainer img{
    width:250px; 
    float:left;
}

.imageinfo{
    background:white;
    opacity:0.9;
    width:100%;
    height:100px;
    position:absolute;
    top:0px;
    display:none;
}

#close{
    position:absolute;
    background:black;
    color:white;
    width:100px;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    top:30px;
    right:30px;
}
</style>


<script>
$(document).ready(function(){
    // hide information about image when button close is clicked
    $(".close").click(function(){
         $(this).parent().hide();
    });


    /* here I need the code to show the imageinfo and the image[number]image class
    depending on which image was clicked.
    */
});
</script>

<!-- container -->
<div class="imagecontainer">
    <img src="image1.png" id="image1">
    <img src="image2.png" id="image2">
    <img src="image3.png" id="image3">
</div>

<!-- image info -->
<div class="imageinfo">
    <div class="image1image"><img src="image1.png"></div>
    <div class="image2image"><img src="image2.png"></div>
    <div class="image3image"><img src="image3.png"></div>
    <div id="close">CLOSE</div>
</div>

非常感谢您的帮助:)

Answer 1

是这样的吗？:

$('img[id^="image"]').click(function () {
    var id = $(this).attr('id');
    $('div[class^="' + id + '"]').show();
});

这会将点击事件绑定到每个匹配的 img 元素，在该事件中将获取被点击元素的 id 并将该 id 用于 select一个div来显示。

您甚至可以使用单击处理程序而不是每个元素一个来执行此操作。像这样：

$('div.imagecontainer').on('click', 'img[id^="image"]', function () {
    var id = $(this).attr('id');
    $('div[class^="' + id + '"]').show();
});

这只会将一个单击处理程序附加到包含 div 并使用事件委托来处理单击事件。

Answer 2

首先你需要知道点击图片的id。然后设置要显示的元素。

$('.imagecontainer img').click(function() {
        // all hide
        $('.imageinfo div').hide();

        // get id of clicked img
        var id = $(this).attr('id');
        console.log(id);

        // show info img
        $('.imageinfo .'+id).show();
    });

看看我的解决方案

http://jsfiddle.net/e66uo3ra/

隐藏显示 Jquery

Hide Show Jquery

jquery

html

image

hide

show

隐藏 显示 Jquery

Hide Show Jquery

jquery

html

image

hide

show

隐藏显示 Jquery