Использование jQuery / Ajax для переключения изображений по клику + PHP для вызова изображений

Question

Я работаю на сайте WordPress, который показывает список книг - и у каждой книги есть 2 обложки (обложка для США и другая обложка для Великобритании / мира).

У меня есть 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

Попробуйте что-то вроде этого:

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

Answer 2

Я позволил себе привести пример, основанный на вашей более высокой цели. Конечно, это требует настройки, но технически это самый простой пример.

Живой пример: 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>