Jquery切換並隱藏

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

我不得不假人圖像3的消息，但希望你的想法。

$(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>