使用jQuery实现div内指定元素隐藏与显示的功能求助

我帮你修复代码里的问题，让它完美实现你要的功能——点击第一个链接让所有.picked元素1.5秒隐藏，点击"Should"链接重新显示它们：

原代码的核心问题 #

• 选择器错误：你用了$("#picked")，但目标元素是class为picked，应该用**.picked**（.对应class选择器，#是id选择器）
• 事件绑定冲突：所有<a>标签都绑定了重复的点击事件，还把其中一个写在了$(document).ready()外面，导致逻辑混乱
• 缺少动画时长：没有实现需求里的1.5秒隐藏动画
• 未阻止链接默认行为：点击链接会触发页面跳转，打断功能

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<title>Coding Tasks</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 点击第一个链接（隐藏.picked元素）
    $('div .picked a').click(function(e) {
        e.preventDefault(); // 阻止链接默认跳转
        $(".picked").hide(1500); // 1.5秒动画隐藏所有class为picked的元素
    });

    // 点击"Should"链接（显示.picked元素）
    $('#show_hidden a').click(function(e) {
        e.preventDefault();
        $(".picked").show(); // 显示所有class为picked的元素
    });
});
</script>
<style>
.important { font-weight: bold; font-size: xx-large; }
.set_colour { color: blue; }
.test { width: 500px; }
div { 
    padding: 3px;
    margin: 3px;
    border: thin solid navy;
    height:200px; 
}
</style>
</head>
<body>
<p>Name: George Bob</p>
<div>
<p class="test">Test 1: Hide and Show</p>
<p class="picked">When you click on <a href="#">this</a> all paragraphs of class 'picked' should take 1.5sec and hide</p>
<p id="show_hidden"><a href="#">Should</a> should not hide and on click should show hidden</p>
<p class="picked">This should hide as well</p>
</div>
</body>
</html>

关键改动说明 #

1. 精准绑定事件：分别给两个不同的链接绑定点击事件，用$('div .picked a')定位第一个链接，$('#show_hidden a')定位"Should"链接，避免冲突
2. 修正选择器：用$(".picked")选中所有class为picked的元素
3. 添加动画时长：hide(1500)里的1500代表1500毫秒（即1.5秒），实现平滑隐藏效果
4. 阻止默认行为：调用e.preventDefault()避免点击链接时页面刷新
5. 简化CSS：把重复的padding/margin/border属性合并写法，保持代码整洁

这样修改后，你的功能就能正常工作啦！

内容的提问来源于stack exchange，提问作者fudgey