Как скрыть все элементы с определенным набором атрибутов? - PullRequest
Новая
       33

Как скрыть все элементы с определенным набором атрибутов?

0 голосов
/ 28 июля 2011

У меня есть ряд элементов, вставляемых в мой HTML-документ с помощью ajax-запроса из php-документа.Возвращаемые данные состоят из набора элементов 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".

Спасибо за ваше время и помощь.

Ответы [ 4 ]

4 голосов
/ 28 июля 2011

Если я правильно понимаю ваш вопрос, что-то вроде этого должно работать: 

$(".category").live('click',function(){
       var category = $(this).attr("categoryID");
       $("[categoryID=" + category + "]").not('.category').hide();
    });
1 голос
/ 28 июля 2011

Вы можете отформатировать 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();
    }
  });
});
0 голосов
/ 28 июля 2011

Это должно сделать это для вас:

http://jsfiddle.net/J6PRM/

надеюсь, это поможет.

0 голосов
/ 28 июля 2011

Попробуйте использовать селектор атрибутов jquery: http://api.jquery.com/attribute-equals-selector/

Вы должны объединить его с чем-то другим, чтобы не скрывать основной div, например ": not (.skillCategory)" или подобным.

...