0

$(document).ready(function() {
  var counts = $('#grid li a').size();
  $('.col-lg-9 p').text('at the moment their ' + counts);
});

$('.col-lg-3 p').click(function(e) {
  e.preventDefault();
  var a = $(this).attr('data-id');
  a = a.substr(1);
  $('#grid li a').each(function() {
    if (!$(this).hasClass(a) && a != 'all')
      $(this).addClass('hide');
    else
      $(this).removeClass('hide');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row mt">
    <div class="col-lg-9">
      <h1>Hello, my works below</h1>
      <p></p>
    </div>
    <div class="col-lg-3">
      <p data-id="#optam" class="pull-right"><br><button type="button" class="btn btn-blue">optam</button></p>
      <p data-id="#math" class="pull-right"><br><button type="button" class="btn btn-blue">math</button></p>
      <p data-id="#all" class="pull-right"><br><button type="button" class="btn btn-blue">all</button></p>
    </div>
  </div>
</div>


<div id="portfolio">
  <div class="container">
    <div class="row mt">
      <ul class="grid effect-2" id="grid">
        <li>
          <a class="optam" href="proj/p5.html"><img src="assets/img/portfolio/cpp5.jpg"></a>
          <h2>Practical 5</h2>
        </li>
        <li>
          <a class="math" href="proj/p5.html"><img src="assets/img/portfolio/cpp5.jpg"></a>
          <h2>Practical 5</h2>
        </li>
      </ul>
    </div>
  </div>
</div>

Когда я нажимаю в классе col-lg-3 кнопку math или optam, то пикча не подходящая под фильтр пропадает, но <h2>Practical 5</h2> остается. Подскажите в чем проблема?

2 ответа 2

0

К коду, конечно, очень много вопросов - начиная, от использования устаревшего jQuery API (метод size(), например) до не совсем верного кода (например, в e.preventDefault() нет необходимости, когда в данном случае обрабатываешь событие click на элементе p: какое у параграфа поведение по умолчанию для того, чтобы его превентить?)
Но, если отвечать на вопрос, то элемент

<h2>Practical 5</h2> 

не исчезает, потому что он находится не в <a> элементе, а ты здесь присваиваешь класс a элементу (линке)

$('#grid li a').each(function() {
    if (!$(this).hasClass(a) && a != 'all')
        $(this).addClass('hide');
    else
        $(this).removeClass('hide');
});

Вот изображение исчезает, потому что находится в <a> элементе

<li><a class="optam" href="proj/p5.html"><img src="assets/img/portfolio/cpp5.jpg"></a><h2>Practical 5</h2></li>
0

Вариант 1:

$('#grid li a').each(function() {
    if (!$(this).hasClass(a) && a != 'all') {
      $(this).addClass('hide').closest("li").find("h2").addClass('hide');
    } else {
      $(this).removeClass('hide').closest("li").find("h2").removeClass('hide');
    }
});

Вариант 2: используем element + next

при помощи element + next получаем следующий элемент

if(a != 'all')
{
  $('#grid li a, #grid li a + h2').addClass("hide");
  $('#grid li a[class*="'+a+'"], #grid li a[class*="'+a+'"] + h2').removeClass("hide");
}
else{
  $('#grid li a, #grid li a + h2').removeClass("hide");
}

Вариант 3: используем siblings()

при помощи siblings() получаем всех братьев и сестер в наборе DOM (в родителе).

! Если У Вас будут сторонние строки в <li> к которым не должен применяться класс .hide, данное решение не подойдет

if(a != 'all')
{
  $('#grid li a').addClass("hide").siblings().addClass("hide");
  $('#grid li a[class*="'+a+'"').removeClass("hide").siblings().removeClass("hide");
}
else{
  $('#grid li a').removeClass("hide").siblings().removeClass("hide");
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.