Question

我想用jquery完成以下内容：

点击此链接

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

我希望所有的div都像那些

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

做某事。

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

Answer 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();

Answer 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。

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

Answer 3

DEMO： 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();  
       });  
    });

这会将文字保留在<a>标记内，并在<div class="category">文字与<a>文字匹配的情况下搜索.category显示相关的.product内容！

注意：

脚本匹配大写和小写字符

示例匹配Cars以及cars和CARS

还匹配间隔文字，例如<a> cars </a>以及<a>cars</a>和<a>cars </a>

还匹配标记文字，例如<div class="category"><span>cars</span></div>

根据标记的html值显示元素

3 个答案: