javascript - PHP，CSS，JavaScript : click on image -> change the image -> call function

Question

我想要 4 张图片。点击图片后，会变成不同的图片和调用功能。我已经拥有它并且可以使用，但只能单独使用。

更改图像的代码。 (我只为一张图片放了代码):

<form method="post" action="index.php" name="loginform">
<script>
function prvni(img) 
{
   img.src = "img/green/green_0.jpg";
   document.getElementById("image2").src = "img/red/red_0.jpg";
   document.getElementById("image3").src = "img/red/red_0.jpg";
}
</script>   
<img src="img/red/red_0.jpg" id="image1" onclick=prvni(this) />
</form>

通过按钮(type=submit)调用函数的代码:

<form method="post" action="index.php" name="loginform">
    <input id="user_drink" class="login_input" type="text" name="user_drink" ?> required /><br>
    <input type="submit"  name="pridat" value="přidat" id="button"/><br>
</form>

和来自不同文件的代码:

elseif (isset($_POST["pridat"])) {
$this->myfunction();

当我尝试更改类型提交到图像时，它不起作用。

也许我上面的代码不是一个好方法。

你能帮我看看怎么做吗(点击图片 -> 更改图片 -> 调用函数)

谢谢

Answer 1

从 javascript 调用 php 函数的唯一方法是使用 Ajax 发送帖子或在更改图像后获取请求。

查看此 CodePen对于客户端。

在你的 php 文件中:

// read the data
$mydata = $_POST['data'];

// perform actions

// return if needed
header('Content-Type: application/json');
echo json_encode(array('returnData' => 'myOtherData'));