Question

我已经使用此图片和此数据ID获得了一些HTML。

<img id="test" src="image1.png" data-id="12345" />

我想更改image1.png的{{1}}，或者点击图片时更改image2.png的{{1}}。

image2.png

这是我的test.php脚本。

image1.png

我遇到了Ajax和JQuery的一些困难，因为我不习惯......

Answer 1

将图像存储在div中。每当点击图像检索id并通过ajax传递给test.php并回显div中的响应

<强>炫魅

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{

$("#toggle").on('click', '#test', function()
{
    var $id = $(this).attr('data-id');

    $.ajax({
        type: "POST",
        url: "test.php",
        data: { id: $id },
        success: function(theResponse) {
            $('#toggle').html(theResponse);
            }
    });
});


});
</script>

<div id="toggle">
<img id="test" src="image1.png" data-id="12345" />
</div>

<强> test.php的

<?php
# Get Id here
$id = isset($_POST['id']) ? $_POST['id'] : '';

# for testing; remove this
echo $id;

# change here date-id and src; if it is dynamic do the database select and display image
echo '<img id="test" src="image2.png" data-id="54321" />';
?>

我想运行PHP代码并在点击时更改图像

1 个答案: