使用javascript用嵌入式PHP编辑html

Question

我希望有人对我有答案，

我目前正在尝试为我的商店网站创建一个PHP产品页面，我有一个sql表，用于存储图像前缀的名称，例如，如果图像文件为“ test_1.png”，则该表存储“ 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)) ），并使用具有id的getElementById来操作src。

<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。