Как использовать «это» в нескольких классах JQuery - PullRequest
Новая
       10

Как использовать «это» в нескольких классах JQuery

0 голосов
/ 16 сентября 2018

Я скрываю элементы li класса 'hidden-items', используя jquery, и хочу показать их, когда нажата ссылка more tag . Часть jquery работает, но отображаются все элементы списка. Я искал об этом и узнал о 'this' селекторе. Но я не совсем понимаю, как использовать это для отображения элементов, которые близки к больше тегов ссылка. 

<div class="tag-box">
 <ul class='gk-tags'>
  <li><a href='/category/economic' class='gk-tag'>Economic</a></li>
  <li><a href='/category/test' class='gk-tag'>Test</a></li>
  <li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
  <li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
 </ul>
 <a class='tag-show-more'>more tags</a>
</div>

<div class="tag-box">
 <ul class='gk-tags'>
  <li><a href='/category/test' class='gk-tag'>Test</a></li>
  <li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
  <li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
 </ul>
 <a class='tag-show-more'>more tags</a>
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('.hidden-items').hide();
  jQuery('.tag-show-more').click(function(){
     jQuery('.hidden-items').show();
  });
});
</script>

Ответы [ 4 ]

0 голосов
/ 16 сентября 2018

Вы можете сделать это так 

jQuery(this).siblings('.gk-tags').find('.hidden-items').show();
0 голосов
/ 16 сентября 2018

просто используйте $(this) для выбора текущего выбранного элемента.

, затем используйте .parents('.classNameOfParent'), чтобы получить родительский элемент

, а затем скрыть родительский элемент 

.hide()

Вы можете сделать это так: 

 $(this).parents('.classNameOfParent').hide()

удачи!

0 голосов
/ 16 сентября 2018 
 jQuery(document).ready(function(){
      jQuery('.hidden-items').hide();
      jQuery('.tag-show-more').click(function(){
         jQuery(this).closest(".tag-box").find('.hidden-items').show();
      });
    });

Надеюсь, это поможет. Благодаря.

0 голосов
/ 16 сентября 2018

В зависимости от структуры вашего HTML, вы можете использовать .prev() и .find() с this, например: 

jQuery(this).prev('.gk-tags').find('.hidden-items').show();


jQuery(document).ready(function(){
  jQuery('.hidden-items').hide();
  jQuery('.tag-show-more').click(function(){
     jQuery(this).prev('.gk-tags').find('.hidden-items').show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tag-box">
 <ul class='gk-tags'>
  <li><a href='/category/economic' class='gk-tag'>Economic</a></li>
  <li><a href='/category/test' class='gk-tag'>Test</a></li>
  <li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
  <li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
 </ul>
 <a class='tag-show-more'>more tags</a>
</div>

<div class="tag-box">
 <ul class='gk-tags'>
  <li><a href='/category/test' class='gk-tag'>Test</a></li>
  <li><a href='/category/sports' class='hidden-items gk-tag'>Sports</a></li>
  <li><a href='/category/health' class='hidden-items gk-tag'>Health</a></li>
 </ul>
 <a class='tag-show-more'>more tags</a>
</div>
...