JavaScript .replace Funzione nel codice jQuery che non dà risultati attesi

Question

Ho un menu di navigazione che è costruito in PHP in modo che la posizione corrente abbia un'immagine diversa in modo che l'utente sappia dove si trova.

Nella funzione, ho questi attributi HTML emesso:

Per impostare il td id:

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

e per impostare l'img id e definito dall'utente img data-id:

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

Il la funzione ha anche questo 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>'; 

per impostare la pagina corrente su Sì per etichettarlo.

Fondamentalmente gli ho dato due matrici di collegamenti e immagini e la pagina corrente ha un'immagine evidenziata. Questo menu sembra funzionare bene e lo sto usando da un po '.

Recentemente ho voluto cambiarlo in modo che oltre a questa funzionalità, ottengo il passaggio del mouse sugli effetti con jQuery. Pensavo che quanto potesse essere difficile? Beh, è ​​stato più difficile di quanto immaginassi. Non sono affatto un esperto di JavaScript o di jQuery, quindi non sono sorpreso di rovinare tutto.

Ecco l'jQuery con cui sto lavorando che non sta dando i risultati attesi:

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

Questo sembra funzionare per la parte, se, ma il ramo altro non fa quello che ho pensato che dovrebbe . Cambia il collegamento alla luce e quindi il passaggio del mouse lo trasforma in scuro sopra e poi si accende.

Quando controllo gli elementi con Firefox, gli ID e gli attributi delle classi sono ciò che imposto, ad esempio il collegamento evidenziato è impostato su Sì e gli altri non impostati. Sembra che tutto funzioni, eccetto il resto. Cosa mi manca?

EDIT

ho guardato nel sorgente della pagina quando la home page è stato attuale, pensando che sarebbe stato "_dark" perché sembra che l'immagine scura, ma ancora la fonte dice che è l'immagine "_light" . Ma quando controllo l'elemento con Firefox, mi dice che è l'immagine "_dark" con gli attributi alt. Credo che il PHP stia scrivendo i dati sulla pagina (server derivato), come previsto, e jQuery sta agendo su di esso (cambiando il DOM), come previsto, ma non riesco a farli giocare correttamente. Penso di aver bisogno di impostare in qualche modo l'immagine con jQuery dopo l'evento hover in modo che sembri come dovrebbe. Come faccio a far funzionare questi come voglio?

EDIT 2

Mi sembra di vedere il motivo per cui le .attr() e .data() metodi jQuery non funzionano. Il docs dice che funzionano con il primo elemento della collezione. O lo sto fraintendendo? Quindi, in pratica, anche se il PHP scrive l'elemento come lo voglio, nel posto giusto e con il giusto valore, quando controllo l'elemento, ottengo diversi valori. Questo sembra bloccare il hover/replace dal funzionare correttamente.

ho provato questa variante che è un po 'più semplice:

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

E io di prova per test di essere uguale a alt che ora dico PHP per inserire subito dopo il tag img. Ma per qualche motivo quando allerta la variabile test, sto ancora diventando indefinito. Presumibilmente perché l'ordine degli attributi del tag img.

In che modo gli sviluppatori di PHP aggirano questo problema e fanno sì che PHP e jQuery giochino bene insieme? Sembra che questi tipi di confusione sarebbero dappertutto nei siti PHP che usano jQuery.

Answer 1

HTML personalizzato attributi veramente solo entrò con HTML5 così si potrebbe ottenere qualche problema in più con i dati-id attributo.

Suggerirei di aggiungere una classe all'img addClass(). È quindi possibile verificare se un elemento ha quella classe utilizzando hasClass().

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

E allora si dovrebbe fare qualcosa di simile

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

sembra che ci sia un errore di sintassi nel codice. tenta di chnage questo:

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

a:

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