JavaScript .replace jQuery 코드에서 예상되는 결과를 얻지 못하는 함수

Question

PHP가 내장 된 탐색 메뉴가있어서 현재 위치가 다른 이미지를 가지므로 사용자는 자신이 어디에 있는지 알 수 있습니다. 기능에

는, 나는 이러한 HTML 속성은 출력했다 :

$menu_output .= '<tr><td id="nav_buttons">'; 

그리고 img id 및 사용자 정의 img data-id 설정 :

가 td id을 설정하려면

$menu_output .= '" id="alt" data-id="yes'; 

을 함수에는 다음 비트가 있습니다.

... 
if ($current_page == $key) { 
    $menu_output .= $image_dir . $ds . $page_nav_alt[$key]; 
    $menu_output .= '" id="alt" data-id="yes'; 
} 

else { 
    $menu_output .= $image_dir . $ds . $page_nav[$key]; 
} 

$menu_output .= '" border="0" height="19" width="129"></a></td>'; 

태그 지정을 위해 현재 페이지를 예로 설정합니다.

기본적으로 두 개의 링크 및 이미지 배열을 제공하며 현재 페이지에는 강조 표시된 이미지가 있습니다. 이 메뉴는 잘 작동하는 것처럼 보입니다. 잠시 사용하고 있습니다.

최근에이 기능 외에도 jQuery를 사용하여 효과 위로 마우스를 가져갈 수 있도록 변경하려고합니다. 내 생각은 얼마나 힘들었 을까? 음, 상상했던 것보다 더 어려웠습니다. 결코 JavaScript 나 jQuery에 대한 전문가가 아니기 때문에 나는 이것을 망쳐 놓고 놀랐습니다. 여기

는 jQuery를 내가 예상 한 결과 제공되지 않도록 함께 일하고 있어요된다

$(document).ready(function() { 

    var test = $('#alt').attr('data-id'); 

    if (test != 'yes'){ 
     $('#nav_buttons img').hover(function() { 
      this.src = this.src.replace('_dark', '_light'); 
     }, 
     function() { 
      this.src = this.src.replace('_light', '_dark'); 
     }); 
    } 

    else { 
     $('#nav_buttons img').hover(function() { 
      this.src = this.src.replace('_light', '_dark'); 
     }, 
     function() { 
      this.src = this.src.replace('_dark', '_light'); 
     }); 
    } 
}); 

이가 작동하는 것 같다을 경우 일부 있지만, 다른 지점은 내가 그것을해야 무슨 생각을하지 않는다 . 그것은 링크를 빛으로 바꾸고, 그 다음에 호버 (hover)는 그것을 어둡게, 어둡게 바꿉니다.

Firefox에서 요소를 검사 할 때 클래스 ID와 속성은 내가 설정 한 것입니다. 예를 들어, 강조 표시된 링크는 예로 설정되고 다른 속성은 설정되지 않습니다. else 브랜치를 제외한 모든 것이 작동하는 것 같습니다. 내가 뭘 놓치고 있니?

편집

홈 페이지는 현재 때 나는 그것이 어두운 이미지처럼 보이기 때문에 그것을 "_dark"이 될 것입니다 생각, 페이지 소스로 보였지만, 아직 소스는 "_light"이미지 말한다 . 그러나 Firefox에서 요소를 검사 할 때 alt 속성이있는 "_dark"이미지라는 것을 알 수 있습니다. 예상대로 PHP가 페이지 (서버 파생)에 데이터를 쓰고 있고 jQuery가 (DOM을 변경하면서) 예상대로 작동하지만 올바르게 재생할 수 없다고 생각합니다. hover 이벤트가 발생하면 jQuery로 이미지를 설정해야합니다. 내가 원하는대로이 기능들을 어떻게 얻습니까?

EDIT 2

나는 .attr() 및 .data()의 jQuery 방법이 작동하지 않는 이유를 알 것 같아요. docs은 컬렉션의 첫 번째 요소와 함께 작동한다고 설명합니다. 또는 나는 그것을 오해하고 있는가? 그래서 기본적으로 PHP는 요소를 검사 할 때 올바른 위치와 올바른 값으로 원하는 요소를 씁니다. 다른 값을 얻습니다. 이것은 호버/교체가 올바르게 작동하는 것을 막는 것 같습니다.

나는 조금 더 간단이 변화를 시도 :

var test = $('img').data('id'); 

을 그리고 test 내가 지금 바로 img 태그 뒤에 배치 할 PHP에게하는 alt 동일하게 내가 테스트. 하지만 어떤 이유로 변수 test에 경고를하면 Im은 여전히 ​​정의되지 않고 있습니다. 아마도 img 태그의 순서 때문일 것입니다.

어떻게 PHP 개발자가이 문제를 해결하고 PHP와 jQuery를 함께 사용하면 좋을까요? jQuery를 사용하는 PHP 사이트에서 이런 종류의 고소가있을 것 같습니다.

Answer 1

사용자 정의 HTML이 HTML5에 온 유일한 정말 속성 그래서 당신은 데이터 ID로 몇 푼 문제를 얻을 수 있습니다 속성.

img addClass()에 수업을 추가하시는 것이 좋습니다. 그런 다음 hasClass()을 사용하여 요소에 해당 클래스가 있는지 테스트 할 수 있습니다. 이 모든 것은 PHP 코드와 무슨 상관이 확실하지

$(document).ready(function() { 
$('#nav_buttons img').hover(function() { 
    if($(this).hasClass('data-id-yes') 
    { 
     this.src = this.src.replace('_dark', '_light'); 
    } else { 
     this.src = this.src.replace('_light', '_dark'); 
    } 
}, 
function() { 
    if($(this).hasClass('data-id-yes') 
    { 
     this.src = this.src.replace('_light', '_dark'); 
    } else { 
     this.src = this.src.replace('_dark', '_light'); 
    } 
}); 
}); 

Answer 2

코드에 구문 오류가 있다고 들립니다. 이 chnage하려고 :

$menu_output .= '" id="alt" data-id="yes'; 

에 :

$menu_output .= 'id="alt" data-id="yes"'; 

$('#nav_buttons img').hover(function() { 
     var test = $('#alt').data('id'); 
     if (test != 'yes'){ 
      this.src = this.src.replace('_dark', '_light'); 
     } else { 
      this.src = this.src.replace('_light', '_dark'); 
     } 
    }, function() { 
     if (test != 'yes'){ 
      this.src = this.src.replace('_light', '_dark'); 
     } else { 
     this.src = this.src.replace('_dark', '_light'); 
     } 
});