使用jQuery/Ajax切换点击图像+ PHP来调用图像

Question

我正在研究一个显示书籍列表的WordPress网站 - 每本书都有两个封面（一本是美国的封面，另一本是封面英国/世界的书籍封面）。

我有一个DIV与2个链接（美国版和英国版） - 和我试图用jQuery和/或Ajax来切换书的封面，当你点击每个链接。

我被卡住，因为我需要使用PHP函数调用图像，让我们把它称为“get_image”

这是我（打破）代码。

HTML：

<a id="us-cover" href="#">US Version</a> | <a id="uk-cover"href="#">UK Version</a>` 

JAVASCRIPT + PHP：

jQuery(function(){ 
    $("#us-cover").live('click', function() { 
     <?php get_image('us'); ?> 
    }); 
}); 
jQuery(function(){ 
    $("#uk-cover").live('click', function() { 
     <?php get_image('uk'); ?> 
    }); 
}); 

我应该如何进行吗？

Answer 1

我冒昧地根据您的更高目标迈进的例子。当然它需要调整，但从技术上讲，这是最简单的例子。

活生生的例子：http://jsfiddle.net/hobobne/LUDwz/

<style> 
    #book_cover {display: none;} 
</style> 
<script> 
    var us_cover = 'http://thebosh.com/archives/2010/11/25/Miley-Cyrus.jpg' ; 
    var uk_cover = 'http://www.ashleefan.com/wp-content/uploads/2010/06/MileyCyrus.jpg'; 

    var book_cover = $('#book_cover'); 

    $(document).ready(function() { 
     // This sets the default on load 
     book_cover.attr('src', us_cover); 
     book_cover.fadeIn(300); 
    }); 

    $('.triggers').click(function() { 
     // Gets the triggers id which will be us or uk 
     var this_trigger = $(this).attr('id'); 
     // Does the work 
     if (this_trigger == 'us') { 
      book_cover.attr('src', us_cover); 
     } else if (this_trigger == 'uk') { 
      book_cover.attr('src', uk_cover); 
     } 
     // Since the triggers are links, then lets return false, so the page woulnt redirect 
     return false; 
    }); 
</script> 
<img id="book_cover" /><br /> 
<br /> 
<a href="#" class="triggers" id="us">US cover</a> | <a href="#" class="triggers" id="uk">UK cover</a> 

Answer 2

尝试这样：

jQuery(function(){ 
    $("#us-cover").live('click', function() { 
     $("#bookimgid").attr("src","<?php get_image('us'); ?>"); 
    }); 
}); 
jQuery(function(){ 
    $("#uk-cover").live('click', function() { 
     $("#bookimgid").attr("src","<?php get_image('uk'); ?>"); 
    }); 
});