和Hide

Question

我想要创建这样的东西，当用户点击一张图片时，它会显示一组信息，当他们再次点击图片时，它会消失，而且如果他们在一张已经显示的图片上单击另一张图片，它会隐藏该图像信息，并显示最近单击的图片的信息。我对JQuery和JS真的很陌生，所以我很难跳出框框来思考，哈哈。

我已经关闭了显示，很容易用.toggleClass()完成；但是我不知道如何完成其余的操作。它就像一个简单的悬停，但有点击。也只有前两项工作，因为我正试图弄清楚它是如何工作的。

谢谢，亲爱的。:)

​

$(function () {
  $('.read').click(function() {
    $('.showread').toggleClass('pshow');
});

$('.sew').click(function() {
 $('.showsew').toggleClass('pshow');
 });
});

.aboutmewrapper {
background: #2F3347;
height: 100vh;
position: absolute;
width: 100%;
}

.imagewrap {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.imagesec {
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
flex-direction: column;
}

.imagesec i {
color: #ececec;
font-size: 100px;
}

.showread {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);  
}

.showsew {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);  
}

.psections {
position: relative;
bottom: 20%;
font-size: 25px;
}

.showread:before, .showsew:before {
content: '';
width: 5px;
height: 40px;
border-radius: 20px;
background-color: #FE715D;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
}

.pshow {
opacity: 1;
}

.phide {
opacity: 0;
}

.imagesec img {
height: 200px;
}

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
>
<div class="aboutmewrapper">

<div class="imagewrap">
    <div class="imagesec">
        <img class="read" src="https://i.imgur.com/3cgLq19.png" alt="">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </div>
    <div class="imagesec">
        <img class="sew" src="https://i.imgur.com/jnwU44r.png" alt="">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </div>
    <div class="imagesec">
        <img src="https://i.imgur.com/MoV3QpE.png" alt="">
        <i class="fa fa-angle-down" aria-hidden="true"></i>        
    </div>
    <div class="imagesec">
        <img src="https://i.imgur.com/yyC2Hjf.png" alt="">
        <i class="fa fa-angle-down" aria-hidden="true"></i>        
    </div>
</div>

<div class="psections">
    <p class="showread">Reading makes you smarter. That's why I read.</p>  
    <p class="showsew">Believe it or not I sew.</p>
</div>

</div>

​

Answer 1

我不得不为image3提供一条信息，但希望你能得到这个想法。

​

$(function(){
  //put a delegate listener on the wrapper for all image clicks
  $('.imagewrap').on('click', 'img', function(e){
    //reference the image in a jquery object
    var $img = $(e.target);
    //get all the messages
    var $messages = $('.psections p');
    //construct the class of the message you want to show
    var messageClass = '.'+ $img.data('message');
    
    //hide any message other than the one we want
    $messages.not(messageClass).removeClass('pshow');
    
    //get the message we should change, and toggle the class, so if it already has it, it will be removed
    $messages.filter(messageClass).toggleClass('pshow');
  });
});

.aboutmewrapper {
background: #2F3347;
height: 100vh;
position: absolute;
width: 100%;
}

.imagewrap {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.imagesec {
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
flex-direction: column;
}

.imagesec i {
color: #ececec;
font-size: 100px;
}

.showread {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);  
}

.showsew {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);  
}

.psections {
position: relative;
bottom: 20%;
font-size: 25px;
}

.showread:before, .showsew:before {
content: '';
width: 5px;
height: 40px;
border-radius: 20px;
background-color: #FE715D;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
}

.pshow {
opacity: 1;
}

.phide {
opacity: 0;
}

.imagesec img {
height: 200px;
}

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
>
<div class="aboutmewrapper">

<div class="imagewrap">
    <div class="imagesec">
        <img class="read" data-message="image1" src="https://i.imgur.com/3cgLq19.png" alt="">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </div>
    <div class="imagesec">
        <img class="sew" data-message="image2" src="https://i.imgur.com/jnwU44r.png" alt="">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </div>
    <div class="imagesec">
        <img data-message="image3" src="https://i.imgur.com/MoV3QpE.png" alt="">
        <i class="fa fa-angle-down" aria-hidden="true"></i>        
    </div>
    <div class="imagesec">
        <img data-message="image4" src="https://i.imgur.com/yyC2Hjf.png" alt="">
        <i class="fa fa-angle-down" aria-hidden="true"></i>        
    </div>
</div>

<div class="psections">
    <p class="showread image1">Reading makes you smarter. That's why I read.</p>  
    <p class="showsew image2">Believe it or not I sew.</p>
    <p class="showsew image3">Believe it or not I lift weights.</p>
    <p class="showsew image4">Believe it or not I sew.</p>
</div>

</div>

​