jQuery와 Waypoint를 사용하여 $ this의 ID를 얻는 방법

웨이 포인트 요소의 ID를 가져온 다음 스크롤이 해당 웨이 포인트에 도달 할 때 해당 ID 값을 클래스로 바디에 추가하려고합니다. 이것은 작동하지 않는 것 같습니다.

HTML

<body class="bg-1"> 
<div id="content"> 
    <div class="cover"> 
     <h2>Title</h2> 
     <p class="keep-scrolling">Keep scrolling along</p> 
    </div> 
    <section class="stats"> 
     <article id="bg-1"> 
      /* stuff */ 
     </article> 
     <article id="bg-2"> 
      /* stuff */ 
     </article> 
     <article id="bg-3"> 
      /* stuff */ 
     </article> 
     <article id="bg-4"> 
      /* stuff */ 
     </article> 
    </section> 
</div> 
</body>

$(function() { $("article").waypoint(function(direction) { //callback when waypoint is reached, with direction of scroll as a parameter var $this = $(this); // caching the waypoint element if($this.attr("id") == "bg-1") { $("body").removeClass(); $("body").addClass('bg-1'); } else if($this.attr("id") == "bg-2") { $("body").removeClass(); $("body").addClass("bg-2"); } else if($this.attr("id") == "bg-3") { $("body").removeClass(); $("body").addClass("bg-3"); } else if($this.attr("id") == "bg-4") { $("body").removeClass(); $("body").addClass("bg-4"); } else { $("body").addClass("bg-1"); }; }); });

나는 ID를 잡기 위해 방법의 수를했습니다 자바 스크립트

하지만 구문 권리를 얻을 수 없습니다.

출처

2016-10-06 mapk

당신이 잘못 웨이 포인트의 콜백 기능을 사용하는 내부의 foreach를 사용하는 것이 좋습니다. API로 다스 려

이

이 당신을 위해 일해야합니다

$(function() { 
    $("article").waypoint({ 
    handler: function(direction) { 
     $("body").removeClass(function(index, css) { 
     return (css.match(/(^|\s)bg-\S+/g) || []).join(' '); 
     }); 
     //or $("body").removeClass(); 
     $("body").addClass(this.element.id); 
    } 
    }); 
});

나는 당신의 솔루션을 좀 더 불통 :

가 bg-로 시작하는 몸에서 모든 클래스를 제거을 (참조 this 대답을 참조)
클래스로 id 추가 (불필요한 'if '구조체 제거)

Example

출처

2016-10-06 17:02:51 empiric

이 중대하다, 감사합니다! 그러나, 나는'.removeClass()'에 대해 [this answer] (http://stackoverflow.com/questions/1424981/how-to-remove-all-css-classes-using-jquery#1424991)을 읽을 필요가 없다. 매개 변수. 또한 웨이 포인트에 대한 첫 번째 인수로 핸들러 옵션을 전달할 수 있음을 [http://imakewebthings.com/waypoints/guides/jquery-zepto/]에서 배웠습니다. – mapk

@mapk 네, removeClass와 맞습니다. 나는 그것을 망쳤다. 그러나 handler-function의'$ (this)'에는 웨이 포인트가 포함되어 있지 않습니다. '이'는 실제 요소가 포함 된 웨이 포인트 객체입니다. – empiric

설명해 주셔서 감사합니다. – mapk

mapk, this $ this는 jquery selector의 응답과 관련이 있습니다. 귀하의 경우 기사 요소 목록을 가져오고 알고리즘이 단일 쿼리로 처리하고 있습니다.

는 코드

$(function() { 
    $("article").waypoint(function(direction) { //callback when waypoint is reached, with direction of scroll as a parameter 
    $(this).each(function(i,val){ 
    var $this = $(val); // caching the waypoint element 

    if($this.attr("id") == "bg-1") { 
     $("body").removeClass(); 
     $("body").addClass('bg-1'); 
    } else if($this.attr("id") == "bg-2") { 
     $("body").removeClass(); 
     $("body").addClass("bg-2"); 
    } else if($this.attr("id") == "bg-3") { 
     $("body").removeClass(); 
     $("body").addClass("bg-3"); 
    } else if($this.attr("id") == "bg-4") { 
     $("body").removeClass(); 
     $("body").addClass("bg-4"); 
    } else { 
     $("body").addClass("bg-1"); 
    }; 


    }); 

    }); 
});

출처

2016-10-06 16:58:39

jQuery와 Waypoint를 사용하여 $ this의 ID를 얻는 방법

답변

관련 문제