使用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'); ?>"); 
    }); 
});