我正在尝试使用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。thumbgen位执行一些大小和颜色转换。当他们在一起时,他们给我一个黑白和彩色图像的url,这些图像被交换。我使用的是WordPress,所以我必须使用php,而不仅仅是指定图像src,因为大小和颜色转换是自动为用户完成的。
第一个问题,像这样做内联代码是不是很糟糕?第二。由于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合二为一吗?
谢谢
发布于 2010-09-26 10:26:11
您可以像这样简化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>
然后,使用该data attribute在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');
});
});
这样做的目的是使用$.data()
存储每个图像的原始src
,然后在悬停时获取任何新的src
属性,并将其存储在data-hover
(我们创建的数据属性)中,当悬停时,我们将获取原始src
并恢复它。
https://stackoverflow.com/questions/3797363
复制相似问题