JavaScript .replace Funkcja w kodzie jQuery nie daje oczekiwanych rezultatów

Question

Mam menu nawigacyjne zbudowane w PHP tak, że bieżąca lokalizacja ma inny obraz, więc użytkownik wie, gdzie on jest.

W funkcji, mam te atrybuty HTML wyprowadzane:

Aby ustawić td id:

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

i ustawić img id i zdefiniowany przez użytkownika img data-id:

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

The funkcja ma również ten bit:

... 
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>'; 

, aby ustawić aktualną stronę na tak, aby ją oznaczyć.

Generalnie podaję dwie tablice linków i obrazów, a na bieżącej stronie jest podświetlony obraz. To menu działa dobrze i używam go przez jakiś czas.

Ostatnio chciałem to zmienić, aby oprócz tej funkcjonalności, najeździłem się efektami z jQuery. Myślałem, że to może być trudne? Cóż, było to trudniejsze, niż sobie wyobrażałem. W żadnym wypadku nie jestem ekspertem od JavaScript lub jQuery, więc nie jestem zaskoczony, że to robię.

Oto jQuery pracuję z tym nie daje oczekiwanych rezultatów:

$(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'); 
     }); 
    } 
}); 

To wydaje się działać dla jeśli część ale oddział inny nie robi tego, co myślałem, że powinien . Zmienia link do światła, a następnie wskaźnik myszy zmienia kolor na ciemny, a następnie włącza się.

Kiedy sprawdzam elementy za pomocą przeglądarki Firefox, ustawiane są klasy i atrybuty, np. Podświetlony link jest ustawiony na tak, a pozostałe nie ustawione. Wygląda na to, że wszystko działa, z wyjątkiem innej gałęzi. czego mi brakuje?

EDIT

Spojrzałem do źródła strony, gdy strona główna była obecna, myśląc, że byłoby „_dark”, ponieważ wygląda na ciemnym obrazie, ale jeszcze źródło mówi, że to „_light” image . Ale kiedy sprawdzam element w Firefoksie, mówi mi, że jest to "_dark" z atrybutami alt. Wierzę, że PHP zapisuje dane na stronie (pochodzącej z serwera) zgodnie z oczekiwaniami, a jQuery działa na nią (zmieniając DOM) zgodnie z oczekiwaniami, ale nie mogę ich poprawnie uruchomić. Myślę, że muszę jakoś ustawić obraz za pomocą jQuery po zdarzeniu aktywowania, aby wyglądało tak, jak powinno. Jak mogę je uruchomić tak, jak chcę?

EDIT 2

myślę, dlaczego metody .attr() i .data() jQuery nie działa. docs mówią, że działają one z pierwszym elementem w kolekcji. Czy nie rozumiem tego? Zasadniczo, nawet jeśli PHP zapisuje element w taki sposób, w jaki go chcę, we właściwym miejscu i przy właściwej wartości, podczas sprawdzania elementu otrzymuję różne wartości. Wydaje się, że blokowanie funkcji zawijania/zastępowania działa poprawnie.

Próbowałem tę odmianę, która jest nieco prostsze:

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

I przetestować test być równa alt którą teraz powiedzieć PHP umieścić bezpośrednio po tagu img. Ale z jakiegoś powodu, gdy ostrzegam zmienną test, nadal jestem niezdefiniowana. Prawdopodobnie dlatego, że atrybut atrybutu img atrybutów.

Jak programiści PHP radzą sobie z tym i sprawiają, że PHP i jQuery grają razem? Wygląda na to, że tego typu konflikty będą wszędzie w PHP, które używają jQuery.

Answer 1

Niestandardowe HTML atrybuty tylko naprawdę przyszedł z HTML5 więc można dostać kilka dodatkowych problemów z danymi-id atrybut.

Proponuję dodać klasę do img addClass(). Następnie możesz sprawdzić, czy element ma tę klasę, używając hasClass().

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

I wtedy byś zrobił coś

$(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

brzmi, że w kodzie występuje błąd składniowy. spróbuj chnage to:

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

do:

$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'); 
     } 
});