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