点击按钮仅显示对应关联链接的jQuery交互实现问题

问题解决方法 #

核心问题点 #

• 你在循环中重复使用了相同的id属性绑定按钮，HTML规范要求id全局唯一，这会导致事件绑定异常
• 原有JS逻辑直接选中所有<a>标签操作，没有和当前点击按钮对应的链接做绑定，才会出现全显全隐的问题

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Python Jobs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/npm/bulma@0.9.3/css/bulma.min.css">
    <section class="hero is-dark is-bold">
        <div class="hero-body">
            <p class="title">
                Job Title
            </p>
            <p class="subtitle">
                Python jobs
            </p>
        </div>
    </section>
    <script>
        $(document).ready(function(){
            // 绑定显示按钮事件
            $(".show-btn").click(function(){
                // 仅操作当前按钮同级的链接标签
                $(this).siblings("a").show();
            });
            // 绑定隐藏按钮事件
            $(".hide-btn").click(function(){
                $(this).siblings("a").hide();
            });
        })
    </script>
</head>
<body>
<section class="section">
    <div class="container">
        {% for i in range(0, len-1) %}
        <!-- 单独包裹每个职位条目，方便元素定位 -->
        <div class="job-item">
            <h3>{{i+1}}. {{title[i]}}</h3>
            <a href={{links[i]}} style="display: none;">{{links[i]}}</a>
            <!-- 用class替代重复id绑定按钮 -->
            <button class="show-btn">Show</button>
            <button class="hide-btn"> Hide</button>
        </div>
        <br>
        {% endfor %}
    </div>
</section>
</body>
</html>

修改说明 #

• 把原来重复的id属性替换为class属性，避免id冲突导致的事件绑定异常
• 给每个循环生成的条目单独用div包裹，方便层级查找
• JS逻辑中通过$(this)获取当前点击的按钮，再用siblings()方法选中同属一个条目的链接标签，只会操作当前条目对应的链接，不会影响其他条目
• 给链接标签加了默认隐藏的行内样式，如果你不需要默认隐藏可以删掉style="display: none;"这段代码

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