클릭하면 활성 클래스를 추가하지만 Isotope.js 필터가 작동하지 않습니다.

user9437856

동위 원소 플러그인을 사용하고 있습니다. 문서에 따르면 아래 코드를 시도했지만 작동하지 않습니다. 를 클릭하면 활성 클래스가 추가되지만 필터가 작동하지 않습니다.

이 문제가 어디에 있는지 도와 줄 수 있습니까?

$('.grid-container-projects').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});
$('.categoryGrid ul li').click(function() {
  $('.categoryGrid ul li').removeClass('active');
  $(this).addClass('active');

  var selector = $(this).attr('data-filter');
  //alert(selector);
  $('.grid-container-projects').isotope({
    // options
    itemSelector: selector
  });

  return false;
});
.categoryGrid ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.categoryGrid ul li {
  background-color: #dd223d;
  color: #fff;
  padding: 10px 30px;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.grid-container-projects {
  width: 100%;
}

.grid-container-projects .grid-item {
  text-align: center;
  height: 300px;
  width: 31%;
  margin-right: 15px;
  margin-bottom: 15px;
}

.projectsListbg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.2);
}

.grid-container-projects h3,
.grid-container-projects h5 {
  color: #fff;
}
<div class="categoryGrid">
  <ul>
    <li class="active" data-filter="*">All</li>
    <li data-filter=".home">Home</li>
    <li data-filter=".music">Music</li>
    <li data-filter=".projects">Projects</li>
    <li data-filter=".uncategorized">Uncategorized</li>
  </ul>

  <div class="grid-container-projects">
    <div class="grid-item home">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1558478551-1a378f63328e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 1</h3>
            <h5>Home</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item music">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642531955-b62e17bdaa9c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 2</h3>
            <h5>Music</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item home">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 3</h3>
            <h5>Home</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item projects">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1565728744382-61accd4aa148?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 4</h3>
            <h5>Projects</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item music">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/flagged/photo-1576697010744-a40aedd2dcca?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 5</h3>
            <h5>Music</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item projects">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1585832770485-e68a5dbfad52?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 6</h3>
            <h5>Projects</h5>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.js"></script>

The_Death_Raw

잘못된 문서를 사용한 것 같습니다. jQuery에 이것을 사용하십시오 : https://isotope.metafizzy.co/filtering.html

var $grid = $('.grid-container-projects').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

// filter items on button click
$('.categoryGrid ul li').click(function() {
  $('.categoryGrid ul li').removeClass('active');
  $(this).addClass('active');
  
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});
.categoryGrid ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.categoryGrid ul li {
  background-color: #dd223d;
  color: #fff;
  padding: 10px 30px;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.grid-container-projects {
  width: 100%;
}

.grid-container-projects .grid-item {
  text-align: center;
  height: 300px;
  width: 31%;
  margin-right: 15px;
  margin-bottom: 15px;
}

.projectsListbg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.2);
}

.grid-container-projects h3,
.grid-container-projects h5 {
  color: #fff;
}
<div class="categoryGrid">
  <ul>
    <li class="active" data-filter="*">All</li>
    <li data-filter=".home">Home</li>
    <li data-filter=".music">Music</li>
    <li data-filter=".projects">Projects</li>
    <li data-filter=".uncategorized">Uncategorized</li>
  </ul>

  <div class="grid-container-projects">
    <div class="grid-item home">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1558478551-1a378f63328e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 1</h3>
            <h5>Home</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item music">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642531955-b62e17bdaa9c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 2</h3>
            <h5>Music</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item home">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 3</h3>
            <h5>Home</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item projects">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1565728744382-61accd4aa148?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 4</h3>
            <h5>Projects</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item music">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/flagged/photo-1576697010744-a40aedd2dcca?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 5</h3>
            <h5>Music</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item projects">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1585832770485-e68a5dbfad52?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 6</h3>
            <h5>Projects</h5>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.js"></script>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

활성 필터의 옵션을 클릭해도 작동하지 않습니다.

분류에서Dev

Vue.js v-bind : class는 클릭시 클래스를 추가하지 않습니다.

분류에서Dev

"제목"을 클릭 할 때 "onpressed"가 작동하지 않지만 "주요"속성을 클릭하면 작동하는 이유는 무엇입니까?

분류에서Dev

버튼을 비활성화해야하는 js 스크립트가 있지만 작동하지 않습니다.

분류에서Dev

수업 추가를 클릭하면 작동하지 않는 것 같습니다.

분류에서Dev

Jquery 추가 클래스가 작동하지 않습니다.

분류에서Dev

텍스트를 클릭하면 OnClickListener가 작동하지 않습니다.

분류에서Dev

AngularJS 지시문은 클릭시 클래스를 추가하지만 클릭하면 제거하고 다른 요소에 추가합니다.

분류에서Dev

<a>를 추가하면 클릭 기능이 작동하지 않습니다.

분류에서Dev

활동 클래스가 존재하지 않습니다.

분류에서Dev

라디오를 클릭하면 클래스가 추가되지만 라디오가 선택되지 않습니다.

분류에서Dev

링크를 클릭하면 부모 목록에 활성 클래스 추가

분류에서Dev

jQuery로 클래스를 추가 할 때 Hyphenator.js가 작동하지 않음

분류에서Dev

CSS onclick 활성 클래스가 작동하지 않습니다.

분류에서Dev

sf2와 연결하기 위해 활성 클래스를 추가하고 나뭇 가지가 작동하지 않습니다.

분류에서Dev

이벤트 클릭 jquery가 backbone.js에서 작동하지 않습니다.

분류에서Dev

추가 페이지 링크를 클릭하면 Codeigniter 페이지 매김이 작동하지 않습니다.

분류에서Dev

추가 된 앵커 태그 클릭 이벤트가 활성 클래스를 추가하지 않습니다. (추가 된 태그는 다른 앵커 태그의 클릭 이벤트에 의해 생성됨)

분류에서Dev

React-Router 활성 클래스가 중첩 된 경로에 대해 작동하지 않습니다.

분류에서Dev

활성 클래스 메뉴 HTML-CSS-JS가 작동하지 않습니다.

분류에서Dev

Javascript 클래스 생성자가 작동하지 않습니다.

분류에서Dev

Jquery는 모든 div에 활성 클래스를 추가하지만 활성 클래스 만 원합니다.

분류에서Dev

"활동"단추를 클릭하지 않고 마우스를 가져 가기 만하면 실행중인 창을 표시하려면 어떻게합니까?

분류에서Dev

node.js의 클릭 이벤트가 작동하지 않습니다.

분류에서Dev

활성 클래스를 추가하고 마지막 클래스에서 제거하는 Vue 바인드 클릭

분류에서Dev

심볼릭 링크를 활성화했지만 fire-app-builder가 여전히 작동하지 않습니다.

분류에서Dev

제거 아이콘을 클릭하면 전역 필터가 작동하지 않습니다.

분류에서Dev

버튼 클릭시 Vue JS 토글 html div 클래스가 작동하지 않습니다.

분류에서Dev

활성 클래스가 추가되지만 이전 메뉴를 제거하지는 않습니다.

Related 관련 기사

  1. 1

    활성 필터의 옵션을 클릭해도 작동하지 않습니다.

  2. 2

    Vue.js v-bind : class는 클릭시 클래스를 추가하지 않습니다.

  3. 3

    "제목"을 클릭 할 때 "onpressed"가 작동하지 않지만 "주요"속성을 클릭하면 작동하는 이유는 무엇입니까?

  4. 4

    버튼을 비활성화해야하는 js 스크립트가 있지만 작동하지 않습니다.

  5. 5

    수업 추가를 클릭하면 작동하지 않는 것 같습니다.

  6. 6

    Jquery 추가 클래스가 작동하지 않습니다.

  7. 7

    텍스트를 클릭하면 OnClickListener가 작동하지 않습니다.

  8. 8

    AngularJS 지시문은 클릭시 클래스를 추가하지만 클릭하면 제거하고 다른 요소에 추가합니다.

  9. 9

    <a>를 추가하면 클릭 기능이 작동하지 않습니다.

  10. 10

    활동 클래스가 존재하지 않습니다.

  11. 11

    라디오를 클릭하면 클래스가 추가되지만 라디오가 선택되지 않습니다.

  12. 12

    링크를 클릭하면 부모 목록에 활성 클래스 추가

  13. 13

    jQuery로 클래스를 추가 할 때 Hyphenator.js가 작동하지 않음

  14. 14

    CSS onclick 활성 클래스가 작동하지 않습니다.

  15. 15

    sf2와 연결하기 위해 활성 클래스를 추가하고 나뭇 가지가 작동하지 않습니다.

  16. 16

    이벤트 클릭 jquery가 backbone.js에서 작동하지 않습니다.

  17. 17

    추가 페이지 링크를 클릭하면 Codeigniter 페이지 매김이 작동하지 않습니다.

  18. 18

    추가 된 앵커 태그 클릭 이벤트가 활성 클래스를 추가하지 않습니다. (추가 된 태그는 다른 앵커 태그의 클릭 이벤트에 의해 생성됨)

  19. 19

    React-Router 활성 클래스가 중첩 된 경로에 대해 작동하지 않습니다.

  20. 20

    활성 클래스 메뉴 HTML-CSS-JS가 작동하지 않습니다.

  21. 21

    Javascript 클래스 생성자가 작동하지 않습니다.

  22. 22

    Jquery는 모든 div에 활성 클래스를 추가하지만 활성 클래스 만 원합니다.

  23. 23

    "활동"단추를 클릭하지 않고 마우스를 가져 가기 만하면 실행중인 창을 표시하려면 어떻게합니까?

  24. 24

    node.js의 클릭 이벤트가 작동하지 않습니다.

  25. 25

    활성 클래스를 추가하고 마지막 클래스에서 제거하는 Vue 바인드 클릭

  26. 26

    심볼릭 링크를 활성화했지만 fire-app-builder가 여전히 작동하지 않습니다.

  27. 27

    제거 아이콘을 클릭하면 전역 필터가 작동하지 않습니다.

  28. 28

    버튼 클릭시 Vue JS 토글 html div 클래스가 작동하지 않습니다.

  29. 29

    활성 클래스가 추가되지만 이전 메뉴를 제거하지는 않습니다.

뜨겁다태그

보관