使用jQuery切换按钮文本后无法还原，求正确实现方案

问题描述 #

我有一个用于显示/隐藏图片画廊内容的按钮，目前已实现将按钮文本从“View Images as Gallery”切换为“Hide Image Gallery”，但再次点击时无法将文本还原为“View Images as Gallery”。以下是我的jQuery代码：

jQuery(function(){
  jQuery(".homeImageGalleryButton").click(function () {
    jQuery(".homeHiddenGallery").toggle();
    jQuery(".homeImageGalleryButton").toggleClass('homeImageGalleryButtonHide');
    jQuery(".homeImageGalleryButtonHide").html("Hide Image Gallery");
  });
});

对应的HTML代码：

<a class="et_pb_button et_pb_button_0 homeImageGalleryButton showGalleryButton">View Images As Gallery</a>

我尝试参考相关代码修改但未成功，请问问题出在哪里？

问题分析 #

你的代码核心问题在于：每次点击时，你只给带有homeImageGalleryButtonHide类的按钮设置了文本，但没有处理类被移除时的文本还原逻辑。具体来说：

1. 第一次点击：按钮添加了homeImageGalleryButtonHide类，你通过jQuery(".homeImageGalleryButtonHide").html("Hide Image Gallery")成功修改了文本。
2. 第二次点击：toggleClass会移除homeImageGalleryButtonHide类，此时jQuery(".homeImageGalleryButtonHide")找不到任何元素，自然无法把文本改回原来的内容。

另外，直接用全局选择器jQuery(".homeImageGalleryButton")或者jQuery(".homeImageGalleryButtonHide")不够精准，最好用$(this)指代当前被点击的按钮，避免页面上有多个同类按钮时出现冲突。

修复方案 #

这里提供两种简洁的修复方式，你可以根据需求选择：

方案一：利用hasClass判断当前状态切换文本

jQuery(function(){
  jQuery(".homeImageGalleryButton").click(function () {
    const $btn = jQuery(this); // 缓存当前按钮对象，提升性能
    jQuery(".homeHiddenGallery").toggle();
    $btn.toggleClass('homeImageGalleryButtonHide');
    
    // 根据当前类状态切换文本
    if ($btn.hasClass('homeImageGalleryButtonHide')) {
      $btn.html("Hide Image Gallery");
    } else {
      $btn.html("View Images As Gallery");
    }
  });
});

方案二：使用toggle方法的回调函数（更简洁）

jQuery(function(){
  jQuery(".homeImageGalleryButton").click(function () {
    const $btn = jQuery(this);
    jQuery(".homeHiddenGallery").toggle(function() {
      // 根据画廊的显示状态切换按钮文本
      $btn.html(jQuery(this).is(':visible') ? "Hide Image Gallery" : "View Images As Gallery");
    });
    $btn.toggleClass('homeImageGalleryButtonHide');
  });
});

关键优化点 #

• 使用$(this)获取当前点击的按钮，避免全局选择器可能带来的误操作。
• 明确判断元素的状态（类存在与否/元素是否可见），对应切换文本内容，确保双向都能生效。

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