javascript - 如何根据点击显示和隐藏内容
问题描述
我有一个图片库,我正在尝试拥有它,所以当点击图片时,它会在 div 中显示不同的内容。
但我不知道如何做到这一点并努力寻找资源来提供帮助。
<div id="user-list">
<div id="users">
<img src="https://picsum.photos/200?image=1058" alt="User 1" class="user">
<img src="https://picsum.photos/200?image=1062" alt="User 2" class="user">
<img src="https://picsum.photos/200?image=1055" alt="User 3" class="user">
<img src="https://picsum.photos/200?image=1045" alt="User 4" class="user">
<img src="https://picsum.photos/200?image=1041" alt="User 5" class="user">
</div>
<div id="user-info">
<img src="https://picsum.photos/300?image=1042" alt="User">
<h3 class="title">Username</h3>
<div class="btn-area">
<a href="#" id="btn-1">BTN 1</a>
<a href="#" id="btn-2">BTN 2</a>
<a href="#" id="btn-3">BTN 3</a>
</div>
<div id="user-stats">
<h4>Stat 1</h4>
<p>1024</p>
<h4>Stat 2</h4>
<p>50%</p>
</div>
</div>
</div>
解决方案
使用 jQuery,您可以获得点击标签的 src 并将其放在您想要的元素的 src 中,如下所示:
$(".user").click(function(){
$("#user-info img").attr('src', $(this).attr('src'));
})
https://jsfiddle.net/rezaxdi/qycz5rh1
您可以对您想要的任何其他内容执行相同的操作,例如根据单击的元素 alt 属性隐藏和显示内容(只是将 user-1 和 user-2 类添加到某些元素):
$(".user").click(function(){
$("#user-info img").attr('src', $(this).attr('src'));
if($(this).attr('alt') == "User 1" || $(this).attr('alt') == "User 2"){
$(".user-1").show();
$(".user-2").hide();
}
else if($(this).attr('alt') == "User 3" || $(this).attr('alt') == "User 4"){
$(".user-1").hide();
$(".user-2").show();
}
else{
$(".user-1").show();
$(".user-2").show();
}
})