enquire.js로 jquery에 대한 더 나은 이해

Question

저는 현재 jQuery에 대한 전반적인 이해를 향상시키고 문제를 해결하려고 노력하고 있습니다. 반응 형 사이트를 향상 시키려면 enquire.js을 조사하고 있습니다. 여기

// Services - mobile 
    $('#services-coaching, #services-workshops, #services-courses').waypoint(function(direction) { 
     if (direction === 'down') { 
      $(this).addClass('open').removeClass('closed'); 
     } 
     else { 
      $(this).addClass('closed').removeClass('open'); 
     } 
    }, { offset: 100 }); 

내가 웨이 포인트를 사용하고 있습니다 : 47em보다 작은 화면 에 대한

<section id="services"> 
    <article id="services-coaching" class="closed"> 
    <div class="image"> 
     <?php include("library/images/service-coaching.svg"); ?> 
     <div class="fallback"> 
    </div> 
    <div class="text"> 
     <?php the_content(); ?> 
    </div> 
    </article> 
    <article id="services-workshops" class="closed"> 
    <div class="image"> 
     <?php include("library/images/service-workshops.svg"); ?> 
     <div class="fallback"> 
    </div> 
    <div class="text"> 
     <?php the_content(); ?> 
    </div> 
    </article> 
    <article id="services-courses" class="closed"> 
    <div class="image"> 
     <?php include("library/images/service-courses.svg"); ?> 
     <div class="fallback"> 
    </div> 
    <div class="text"> 
     <?php the_content(); ?> 
    </div> 
    </article> 
</section> 

jQuery를 : 여기에

는 회사의 서비스를 자세히 작은 부분에 대한 (간체) HTML의 .js를 사용하여 클래스를 변경하여 SVG 이미지에서 CSS 전환을 실행합니다. CSS를 사용하여 모든 작업이 점진적으로 수행됩니다.

는 큰 화면을 위해 CSS 숨기기 .closed에 텍스트 (.text)의와 article이 (.open에 클래스 변경)뿐만 아니라 애니메이션을 트리거를 클릭 할 때를 알 수있다. jQuery를에 대한 이해가 개선 필요가있는

// Services - large screen 
$('#services article').click(function() { 
    $(this).addClass('open').removeClass('closed'); 
}); 

이입니다! 나는 기본적으로 일치 화면 크기, 이런 일에 따라 그들을 UNMATCH하는 enquire.js 이러한 jQuery를 개체를 사용할 수 있다는 것을 알고 :

jQuery(document).ready(function($) { 

    enquire.register("screen and (min-width: 47.0625em)", function() { 

    match : function() { 
     // enable 'waypoint' jQuery object 
     // disable 'click' jQuery object 
    }, 
    unmatch : function() { 
     // disable 'waypoint' jQuery object 
     // enable 'click' jQuery object 
    } 

    }); 

}); 

하지만 가장 좋은 개체를 만드는 방법을 모르는 때문에 이 방법으로 사용할 수 있습니다. 나는 into jQuery fundamentals을 찾기 시작하지만 나 :(

UPDATE 도움이되지 않았습니다. 시도하지만 .bind/.unbind가 작동하지 않을 수 있습니다 처음에 클릭 이벤트에이 테스트

생각을 실패 을하지만 하지 않습니다 내가 잘못을하고 있던 일 다음 일을 클릭하십시오.

enquire.register("screen and (min-width: 47.0625em)", { 
    match : function() { 
    $('#services article').bind('click', function() { 
     $(this).addClass('open').removeClass('closed'); 
    });  
    }, 
    unmatch : function() { 
    $('#services article').unbind('click'); 
    } 
}); 

도착 방법!

Answer 1

좋아, 그래서 내가 좋아했던 jQuery 객체와 함수에 대한 이해를 향상시키지 못했지만,이 특별한 문제가 해결되고 작동하게되었습니다.

내 주된 문제는 일단 창 크기를 조정하면 '중간 지점'과 '클릭'기능이 모두 활성화되었다는 것입니다. 해결책은 필요하지 않은 곳마다 취소하는 것이었지만 어떻게해야할지 몰랐습니다. 내가 클릭 이벤트 및 waypoint('destroy')가 속임수를 썼는지

bind/unbind

jQuery(document).ready(function($) { 

    enquire.register("screen and (max-width: 47em)", { 

    match : function() { 
     $('#services-coaching, #services-workshops, #services-courses').waypoint(function(direction) { 
      if (direction === 'down') { 
      $(this).addClass('open').removeClass('closed'); 
      } 
      else { 
      $(this).addClass('closed').removeClass('open'); 
      } 
     }, { offset: '50%' }); 
    }, 
    unmatch : function() { 
     $('#services-coaching, #services-workshops, #services-courses').waypoint('destroy'); 
    } 
    }); 

    enquire.register("screen and (min-width: 47.0625em)", { 

    match : function() { 
     $('#services article').removeClass('open'); 
     $('#services article').bind('click', function() { 
     $(this).addClass('open').removeClass('closed'); 
     }); 
    }, 
    unmatch : function() { 
     $('#services article').unbind('click'); 
    } 

    }); 

}); 

... 지금! : D