1

jQueryを使用していくつかのロールオーバーを機能させようとしています。問題は、画像ソースをいくつかのphpコードを使用して取得する必要があることです。

私がjavascriptでこのようにインラインでそれを行うと、それは機能します：

<a href="<?php the_permalink(); ?>"
   <?php $thumburl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
   onmouseover="document.roll<?php the_ID(); ?>.src='<?php thumbGen($thumburl,300,0,1,0,0); ?>'"
   onmouseout="document.roll<?php the_ID(); ?>.src='<?php thumbGen($thumburl,300,0,1,0,1); ?>'"
   <img src="<?php thumbGen($thumburl,300,0,1,0,1); ?>" name="roll<?php the_ID(); ?>"/>
</a>

$thumburl変数はまさにそれです。特定のサムネイルのURL。サムゲンビットは、いくつかのサイズと色の変換を行います。一緒にすると、彼らは私に白黒のURLと交換されるカラー画像を与えます。私はWordPressを使用しているので、サイズと色の変換はユーザーに対して自動的に行われるため、画像srcを指定するのではなくphpを使用する必要があります。

最初の質問は、このようにコードをインラインで実行するのは悪いことですか？2番。PHPが原因で、ロールオーバー用のjQuery関数を作成するのに苦労しています。私はそれがこのようになると思います：

$(document).ready(function() {
   $('.project img').hover(
    funcation(){
    this.src = '<?php thumbGen($thumburl,300,0,1,0,1); ?>';},
    function (){
    this.src = '<?php thumbGen($thumburl,300,0,1,0,1); ?>';});

しかし、これをどこに含めるかはわかりません。$ thumburl = wp_get_attachment_url（get_post_thumbnail_id（$ post-> ID））;

phpとjQueryを1つに組み合わせることができますか？

ありがとう

4

1 に答える 1

0

PHPは次のよ​​うに少し単純化できます。

<a href="<?php the_permalink(); ?>"
   <?php $thumburl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
   <img src="<?php thumbGen($thumburl,300,0,1,0,1); ?>" data-hover="<?php thumbGen($thumburl,300,0,1,0,0); ?>" />
</a>

次に、そのデータ属性を使用して、jQueryで次のようなことを行います。

$(function() {
   $('.project img').each(function() { 
     $.data(this, 'orig', this.src); 
   }).hover(function() {
     this.src = $(this).attr('data-hover');
   }, function () { 
     this.src = $.data(this, 'orig');
   });
});

srcこれは、を使用して各画像のオリジナルを保存し、$.data()ホバーすると、保存する新しいsrc属性data-hover（作成したデータ属性）を取得し、ホバーアウトすると、そのオリジナルを取得してsrc復元します。

于 2010-09-26T10:26:10.793 に答える