使用 javascript 编辑 html 嵌入 PHP

Question

我希望有人能为我解答，

我目前正在尝试为我的商店网站创建一个 PHP 产品页面，我有一个 sql table 存储图像前缀的名称，例如，如果图像文件是 'test_1.png' 那么 table 存储 'test'。使用嵌入式 php

src="images/shop/<?php echo $row['item_img'], '_1.png';?>"></img>

我想做的是使用 js，在鼠标单击时动态更新 src。

例如

var imgSwitch = function(i){
  Document.getElementById('js-img').src = "images/shop/
    <?php echo $row['item_img'], '_';?>i<?php echo '.png';?>";
}

即使对我来说这似乎是错误的，这就是为什么我在这里求助于 GURU

这有可能吗？如果没有，任何建议将不胜感激

Answer 1

我正在尝试弄清楚你在问什么，我认为这是你要走的路：

var imgSwitch = function(i){
  document.getElementById('js-img').src = "images/shop/<?php echo $row['item_img'], '_';?>" + i + ".png";
}

变化在第 i 处，你必须把字符串剪下来，然后把它作为变量添加。

但请记住，PHP代码是在服务器端执行的，一旦页面发送到客户端就不会改变。当您执行该函数时，$row['item_img'] 将始终相同。

Answer 2

一个您可以改编的简单示例。我在下面的代码中所做的是给元素一个 id 并附加一个 onclick 到它。

在函数中，我们将 id 作为参数 (onclick(changeSrc(this.id))) 传递，并且我们使用 getElementById 操作 src，因为我们有 id.

<img src="http://ladiesloot.com/wp-content/uploads/2015/05/smiley-face-1-4-15.png" id="test" onclick="changeSrc(this.id);" height="400" width="400" />

<script>
function changeSrc(id) {
    document.getElementById(id).src = "http://i0.wp.com/www.compusurf.es/wordpress/wp-content/uploads/2014/04/smiley.jpeg?fit=1200%2C1200";
}
</script>

http://jsfiddle.net/tq1Lq5at/

编辑 1

你在使用 Document 而它应该是 document，请注意小写字母 d.

使用 javascript 编辑 html 嵌入 PHP

editing html with embedded PHP using javascript

html

javascript

php

mysql

onclick