5

PHP で構築されたナビゲーション メニューがあり、現在の場所の画像が異なるため、ユーザーは自分の場所を知ることができます。

この関数では、次の HTML 属性を出力しています。

を設定するにはtd id:

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

img idおよびユーザー定義を設定するにはimg data-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 の専門家ではないので、これを台無しにしても驚くことはありません。

これは、私が使用している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');
        });
    }
});

これは if 部分ではうまくいくようですが、else ブランチは私が思っていたことをしません。リンクが明るくなり、ホバーすると、上が暗くなり、次に明るくなります。

Firefox で要素を調べると、クラス ID と属性は設定したものです。たとえば、強調表示されたリンクは yes に設定され、他のリンクは設定されていません。else ブランチを除いて、すべてが機能しているようです。私は何が欠けていますか？

編集

ホームページが公開されていた当時のページソースを調べてみたら、暗いイメージに見えるので「_dark」だろうと思っていたのですが、ソースは「_light」イメージとのこと。しかし、Firefox で要素を調べると、alt 属性を持つ「_dark」画像であることがわかります。予想どおり、PHP がページにデータを書き込んでおり (サーバーから派生)、jQuery がそれに基づいて動作している (DOM を変更している) と思いますが、正しく再生することはできません。ホバーイベントの後にjQueryで画像を設定して、本来のように見えるようにする必要があると思います。これらを希望どおりに機能させるにはどうすればよいですか?

編集2

.attr()および.data()jQuery メソッドが機能しない理由がわかったと思います。ドキュメントによると、これらはコレクションの最初の要素で機能します。それとも私はそれを誤解していますか？したがって、基本的に、PHP は要素を適切な場所に適切な値で書き込みますが、要素を検査すると、異なる値が得られます。これにより、ホバー/置換が正しく機能しなくなっているようです。

少し単純なこのバリエーションを試しました：

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

そして、PHP にタグの直後に配置するように指示testしたものと等しいかどうかをテストします。しかし、何らかの理由で変数を警告すると、まだ未定義になっています。おそらく、タグ属性の順序のためです。altimgtestimg

PHP 開発者がこれを回避し、PHP と jQuery をうまく連携させるにはどうすればよいでしょうか? この種の競合は、jQuery を使用する PHP サイト全体で見られるようです。

4

2 に答える 2

3

カスタム HTML 属性は実際には HTML5 でのみ導入されたため、data-id 属性でさらに問題が発生する可能性があります。

クラスを img addClass()に追加することをお勧めします。その後、 hasClass()を使用して、要素にそのクラスがあるかどうかをテストできます。

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

そして、あなたは次のようなことをします

$(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');
    }
});
});
于 2012-07-13T13:54:22.627 に答える
2

コードに構文エラーがあるようです。これを変更してみてください：

$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');
       }
});
于 2012-07-06T04:05:22.170 に答える