Question

我通过php文档的ajax请求将一系列项目插入到我的html文档中。返回的数据由一堆div元素组成，其中设置了自定义属性，以便我可以告诉哪些div元素属于已返回的项目类别。我希望能够单击类别名称并隐藏所有具有自定义属性的元素（设置为类别名称）。

示例返回

<div class="row">
   <div class="category" categoryID="category_1">
      category_1
      <div categoryID="category_1">item 1</div>
      <div categoryID="category_1">item 2</div>
      <div categoryID="category_1">item 3</div>
   </div>
   <div class="category" categoryID="category_2">
      category_2
      <div categoryID="category_2">item 1</div>
      <div categoryID="category_2">item 2</div>
      <div categoryID="category_2">item 3</div>
   </div>
   <div class="category" categoryID="category_3">
      category_3
      <div categoryID="category_3">item 1</div>
      <div categoryID="category_3">item 2</div>
      <div categoryID="category_3">item 3</div>
   </div>
</div>

<div class="row">
   <div class="category" categoryID="category_1">
      category_1
      <div categoryID="category_1">item 1</div>
      <div categoryID="category_1">item 2</div>
      <div categoryID="category_1">item 3</div>
   </div>
   <div class="category" categoryID="category_2">
      category_2
      <div categoryID="category_2">item 1</div>
      <div categoryID="category_2">item 2</div>
      <div categoryID="category_2">item 3</div>
   </div>
   <div class="category" categoryID="category_3">
      category_3
      <div categoryID="category_3">item 1</div>
      <div categoryID="category_3">item 2</div>
      <div categoryID="category_3">item 3</div>
   </div>
</div>

我正在使用jquery来处理大部分的javascript函数，所以我自然会在使用动态添加到dom的数据时使用下面的代码。

$(".skillCategory").live({
        mouseenter:
           function(){
               $(this).css('background-color', 'white');
           },
        mouseleave:
           function(){
               $(this).css('background-color', '#393939');
           }
       });
    $(".skillCategory").live('click',function(){
        var title = $(".skillCategory").attr("categoryID");

        });
});

我试图隐藏一个类别以及属于它的所有项目，由“categoryID”属性决定。

感谢您的时间和帮助。

Answer 1

如果我理解你的问题，这样的事情应该有效：

$(".category").live('click',function(){
       var category = $(this).attr("categoryID");
       $("[categoryID=" + category + "]").not('.category').hide();
    });

Answer 2

您可以格式化HTML以使用新的“数据属性”表示法：

<div class="category" data-categoryID="category_3">

然后你可以这样做：

$(".category").click(function() {
  var ctx = $(this);
  $(".category").each(function(item) {
    if($(this).data("categoryID") != ctx.data("categoryID") {
      $(this).hide();
    }
  });
});

Answer 3

尝试使用jquery属性选择器：http://api.jquery.com/attribute-equals-selector/

你应该把它与其他东西结合起来以避免隐藏主div，比如“：not（.skillCategory）”或类似的东西。

Answer 4

这可以为你做到：

http://jsfiddle.net/J6PRM/

希望它有所帮助。

如何隐藏具有特定属性集的所有元素？

4 个答案: