jQuery 使用 jQuery Toggle 更改 div 文本内容

在本文中，我们将介绍如何使用 jQuery 的 Toggle 方法来更改 div 的文本内容。Toggle 方法可以用于在两个或多个不同的文本内容之间进行切换。下面是一些示例和详细说明。

jQuery Toggle 方法

jQuery 的 Toggle 方法可以通过点击事件在两个或多个不同的文本内容之间进行切换。它可以在同一个元素上多次连续切换文本内容。

示例 1：切换文本内容

以下示例演示了如何使用 Toggle 方法在点击事件中切换 div 的文本内容：

$(document).ready(function(){
  $("button").click(function(){
    $("div").toggle(function(){
      $("div").text("文本内容已切换");
    }, function(){
      $("div").text("点击按钮继续切换文本内容");
    });
  });
});

在上面的示例中，当按钮被点击时，div 元素的文本内容将在两个不同的文本之间进行切换。初始状态下，div 的文本内容为”点击按钮继续切换文本内容”，当按钮被点击后，div 的文本内容将切换为”文本内容已切换”，再次点击按钮时，文本内容将再次切换回”点击按钮继续切换文本内容”。

示例 2：切换多个元素的文本内容

以下示例演示了如何同时切换多个元素的文本内容：

$(document).ready(function(){
  $("button").click(function(){
    $("div1, div2, div3").toggle(function(){
      $("div1, div2, div3").text("文本内容已切换");
    }, function(){
      $("div1, div2, div3").text("点击按钮继续切换文本内容");
    });
  });
});

在上面的示例中，当按钮被点击时，div1、div2 和 div3 元素的文本内容将在两个不同的文本之间进行切换。