jQuery for 루프 전환 ID

jquery 웨이 포인트 플러그인을 사용하여 동적으로 내 페이지의 배경을 변경하려고합니다 (요소가 뷰포트의 상단 또는 하단에 있음을 알려줍니다). 내 HTML은 간단합니다 - ID가 #part1', # part2 '인 여러 표제가있는 등등. part[x]이 뷰포트의 맨 위에 있으면 img[x]이 표시됩니다.jQuery for 루프 전환 ID

$("#part2").waypoint(function(event, direction) { 
    if (direction === 'down') { 
     $(".container").attr("id", "img2"); 
    } 
    else { 
     $(".container").attr("id", "img2"); 
    } 
});

는 그러나, 나는 18 '부품'이 있고이 코드 18 번을 원하지 않는 :

다음 코드는 작동합니다. 나는이 같은 for 루프 를 사용하여 시도 :

var chapters = $("[id^='part']"); 

for (var i=1; i<=chapters.length; i++){ 

    $("#part[i]").waypoint(function(event, direction) { 
     if (direction === 'down') { 
      $(".container").attr("id", "img[i]"); 
     } 
     else { 
      $(".container").attr("id", "img[i]"); 
     } 
    }); 
}

을하지만 다시 작동하지 않습니다. 내가 한 것처럼 대괄호로 선택자를 벗어날 수 있습니까? 그렇지 않다면 이것을 달성하는 올바른 방법은 무엇입니까?

출처

2013-01-11 Jascination

두 조건 모두에서 동일한 작업을 수행하는 if/else를 수행하는 이유에 대해 혼란스러워합니다. – Popnoodles

@popnoodles 예, 현재로서는 중복되어 있지만 코드를 작성하는 동안 방금 옵션을 원합니다. 사용자가 위 아래로 스크롤하는 경우 별도의 조건을 갖는 것입니다. – Jascination

그리고 .container의 ID를 변경하면 결국 다른 이미지가 어떻게 표시됩니까? – Alnitak

을 필요로하지 않는거야 같은 일을 올바르게 기록 여러 요소를 처리합니다.

$("[id^='part']").waypoint(function(event, direction) { 
    $(".container").attr('id', this.id.replace('part', 'img')); 
});

필요에 따라 방향 확인을 추가합니다. 나는이 플러그인하지만 중요한 부분을 잘 모르겠어요

은 여러 요소에 웨이 포인트 플러그인을 결합 할 수 있어야하고 이벤트 핸들러 내 this이 그 이벤트를 트리거 요소해야한다는 것입니다 그러면 ID는 단지 this.id입니다.

NB : 그러나 그 경우에 사용한다

#img1 { background-image: ... } 
#img2 { background-image: ... } 
...

: 당신의 모습 CSS 규칙의 스택을 가지고하지 않는 한 일반적으로, 그 위에 이미지를 변경하지 않을 .container에 ID를 변경 ID 대신 클래스를 사용하는 것입니다. 엘리먼트의 ID가 평생 동안 지속되고 CSS 클래스가 변경되는 것이 훨씬 더 정상입니다. .container이 다른 CSS 클래스가없는 경우

는 의미가 대신에게 container의 고정 ID를 제공하고 위의 코드의 변형 사용합니다 : 다른 CSS 클래스를 갖는 여부에

$("[id^='part']").waypoint(function(event, direction) { 
    $("#container").attr('class', this.id.replace('part', 'img')); 
});

제약을 class은 여러 값을 포함 할 수 있기 때문에 클래스 목록을 완전히 덮어 쓰려면 이전 클래스를 제거한 다음 새 클래스를 추가하는 것보다 훨씬 간단합니다.

출처

2013-01-11 23:07:03 Alnitak

나는이 대답이 가장 마음에 들고, 사용 된 코드의 양을 줄였으며, for 루프를 사용했을 때와 같은 효과를 가진다. 맞습니다. ID에 해당하는 CSS 규칙이 있습니다. 클래스로 변경하겠습니다. – Jascination

'.attr ('class', this.id.replace ('part', 'img'))'를 사용하여 간단히 설명 할 수 있겠습니까? 기본적으로'this.id .replace()'? 심지어 기능? – Jascination

확실하게, 현재 값을 전달하고 반환 값이 새 값이 될 함수를 포함하여 다른 많은 것들을 넣을 수 있습니다. – Alnitak

대신 왜 안 대괄호를 사용하는 경우 : 당신은 그럼 그냥 ID로 선택

$("#part" + i) 
"img" + i

, 동적 ID를 만들 수 있습니다.

출처

2013-01-11 23:02:28 Flash

대신 내가 CSS 클래스를 사용합니다 별도의 ID의이

for (var i=1; i<=chapters.length; i++){ 

    $("#part" + i).waypoint(function(event, direction) { 
     if (direction === 'down') { 
      $(".container").attr("id", "img" + i); 
     } 
     else { 
      $(".container").attr("id", "img" + i); 
     } 
    }); 
}

처럼 시도 할 수 있습니다 당신은 웨이 포인트 플러그인을 가정 루프

출처

2013-01-11 23:03:06

jQuery for 루프 전환 ID

답변

관련 문제