根据标签的 html 值显示元素答案

【问题标题】：Show elements depending on html value of a tag根据标签的 html 值显示元素
【发布时间】：2011-02-16 22:16:00
【问题描述】：

我想用 jquery 完成以下工作：

当我点击这个链接时

<a href="#">Cars</a>

我想要所有像这样的 div

<div class="product">
    <div class="category">Cars</div>
</div>

做某事。

你明白了，我有一个包含类别列表和产品列表的菜单，每个列表都包含一个带有类别名称的 div，我想让它们隐藏/显示。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我不确定我是否完全理解您的问题，但如果您希望在单击汽车链接时显示 div class="category" 汽车，请按照以下说明操作：

$("#menu a").click(function() {
   var value = $(this).html();

   $.each($(".category"), function(i, item) {
     if ($(item).html() == value) {
         $(item).parent().hide();
     }

   });
});

如果你想隐藏 div 只需替换 $(item).show(); $(item).hide();

【讨论】：

是的，谢谢你的想法，除了我想隐藏父 div（“产品”）而不是“类别”。我通过 $(item).parent().show(); 设法做到了这一点。而不是 $(item).show();附言。我认为您的代码中有错字，应该是 if ($(item).html() == value) { 而不是 if ($(item).html == value) {
是的，这是一个错字，谢谢，我根据您的最终需求更新了我的答案，幸好我帮助了您.. 再见！ :) 你能把我的答案标记为接受吗？

【解决方案2】：

假设：

<a href="#" class="highlight">Cars</a>

然后：

$("a.highlight").click(function() {
  $("div.category").removeClass("category")
    .filter(":contains(" + $(this).text() + ")").addClass("highlight");
  return false;
});

这样做是将category 类添加到任何包含链接文本的category dvis。如果您也想这样做，可以修改它以修改父 product div。

首先从所有 category div 中删除类 highlight，然后将其添加到需要它的类中。

【讨论】：

【解决方案3】：

演示： http://jsbin.com/ucewo3/11 来源： http://jsbin.com/ucewo3/11/edit

    $('a').click( function(e) {
       var search_term = $.trim($(this).text()); //trim text
      $('.category').each(function() {  
      ($(this).text().search(new RegExp( search_term , 'i')) < 0 )//upper & lower
        ? $(this).parent().hide() : $(this).parent().show();  
       });  
    });

这将 text 保留在 <a> 标记内，如果 <a> 文本与 .category 文本匹配，则搜索 <div class="category">，它显示相关的 .product 内容！

注意：

脚本匹配大写和小写字符

示例匹配 Cars 以及 cars 和 CARS
还匹配 空格文本，例如 <a> cars </a> 以及 <a>cars</a> 和 <a>cars </a>
还匹配标记文本，例如<div class="category"><span>cars</span></div>

【讨论】：

有趣的脚本！感谢分享