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

タグ付けするために現在のページをyesに設定する。

私は基本的にリンクと画像の2つの配列を与え、現在のページは強調表示された画像を持っています。このメニューは正常に機能していると思われ、しばらく使用しています。

最近、私はこの機能に加えて、jQueryでホバーオーバーエフェクトを得るように変更したいと思っています。私の考えはそれがどれくらい難しいかということでした。まあ、想像以上に難しかったです。 JavaScriptや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'); 
     }); 
    } 
}); 

これは一部の場合のために働くようだが、他の支店は、私はそれが必要と思った何をしていません。ここで

は、私はそれが期待される結果を与えていないと働いているjQueryのです。それは光にリンクを変更し、ホバーはそれを暗闇に変えてから消灯します。

Firefoxで要素を調べると、クラスのIDと属性が設定されています。たとえば、強調表示されているリンクは「はい」に設定されています。 else分岐以外はすべて動作しているようです。私は何が欠けていますか？ホームページは現在だったとき、私はそれが暗い画像のように見えるので、それは「_dark」ことだろうと考え、ページのソースに見えたが、まだソースは、それが「_light」の画像と言う

EDIT

。しかし、Firefoxで要素を調べると、それはalt属性を持つ "_dark"イメージであることがわかります。私は、PHPが予想通りに（サーバー派生の）ページにデータを書き込んでいて、jQueryが（DOMを変更して）動作していると思いますが、正しく再生することができません。私は何とかホバリングイベントの後に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'); 
     } 
});