如何在jQuery/HTML中实现点击按钮时隐藏对应标签与按钮？

现有基础代码：

$(document).ready(function () {
    $("#show").click(function () {
        $("img:first").show();
    });
});

$(document).ready(function () {
    $("#hide").click(function () {
        $("img:first").hide();
    });
});

需求：点击HIDE按钮时，目标图片（img:first）和HIDE按钮自身消失；点击SHOW按钮时执行相反操作。

修改后的代码实现 #

$(document).ready(function () {
    // 处理SHOW按钮点击
    $("#show").click(function () {
        $("img:first").show(); // 显示目标图片
        $("#hide").show();     // 显示HIDE按钮
        $(this).hide();        // 隐藏当前点击的SHOW按钮
    });

    // 处理HIDE按钮点击
    $("#hide").click(function () {
        $("img:first").hide(); // 隐藏目标图片
        $(this).hide();        // 隐藏当前点击的HIDE按钮
        $("#show").show();     // 显示SHOW按钮
    });
});

关键说明 #

• 合并了两个$(document).ready()回调，避免重复绑定，代码更简洁高效
• 点击SHOW按钮时：恢复图片显示，同时显示HIDE按钮并隐藏自身，让用户可以继续执行隐藏操作
• 点击HIDE按钮时：隐藏图片，同时隐藏自身并显示SHOW按钮，为下次恢复显示操作做准备
• 使用$(this)指代当前触发事件的按钮，减少重复选择器书写，提升代码可维护性

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