jQuery按文本选择选项 - JavaScript

在处理 HTML 表单的时候，我们可能需要根据选项卡的文本内容来进行选择，这就需要通过 jQuery 来进行实现。

代码实现

我们可以使用 jQuery 中的 .filter() 方法，通过选项卡的文本值来过滤选项卡，具体示例如下：

$(document).ready(function(){
  // 选择元素
  var tabs = $("ul.tabs li");
  
  // 绑定点击事件
  tabs.click(function(){
    // 获取选项卡的文本值
    var text = $(this).text();
    
    // 通过文本值来过滤选项卡
    var tab = tabs.filter(":contains('"+ text +"')");
    
    // 添加或删除选中状态
    tab.toggleClass("active");
  });
});

上述示例中，我们首先选择选项卡 li 元素，通过 .click() 方法绑定点击事件，获取选项卡的文本值，并通过 filter() 方法来过滤选项卡。

然后，我们可以通过 toggleClass() 方法来添加或删除选中状态。

解析说明

• $(document).ready(function(){...});：页面加载完毕后执行函数中的代码；
• $()：选择器，用于选择 HTML 元素；
• $("ul.tabs li")：选择 ul 元素中的所有 li 元素；
• click(function(){...})：绑定点击事件；
• $(this)：当前点击的元素；
• $(this).text()：获取当前点击元素的文本值；
• filter(":contains('"+ text +"')")：通过 contains() 过滤选项卡；
• toggleClass("active")：切换选中状态。

总结

通过 jQuery 来实现按文本选择选项卡，可以更加简单快捷地处理 HTML 表单，提高了Web开发工作的效率。