使用JavaScript在循环中更改特定图像

我想用javascript替换特定序列号中的一个图像，因为父类中的样式更改是有效的，但要更改图像，它只在第一个类中更改 守则：

    <?php 
$ssubprod = mysqli_query($conn,"select * from subproduk where idproduk = '$id'");
$nsubprod = mysqli_num_rows($ssubprod);
for($i = 0 ;$i < $nsubprod; $i++){
    $r = mysqli_fetch_array($ssubprod);
    $idprod = $r[0];
    $idsubprod = $r[1];
    $subprod = $r[2];
    $desk = $r[3];
    $harga= $r[4];
    $st = $r[5];
    ?>
    <button class="accordion">
    <div class="w3-left"><?php echo $subprod; ?></div>
    <div class="w3-right w3-margin-right"><img src="./img/pt.png" width="50%" id="panah"></div>
    <div class="w3-right w3-margin-right"><?php echo $harga; ?></div>
    
    </button>
    <div class="panel">
      <p><?php echo $desk; ?></p>
    </div>
    <?php
}
?>

---

属性
id
应该是唯一的。
尝试将索引变量
$i
与循环中的每个
id
panah一起追加。因此它将是
panah0
，
panah1
等。
您可以在javascript中选择它，如下所示：

 document.getElementById('panah'+i).src = "./img/pt.png";

好了，我现在有了解决方案

我添加了一个新函数来获取src值，代码如下

function gantiimg(i){
    var img = document.getElementById(i).src;
    var sp = img.split("/");
    var sl = sp.splice(0,sp.length-1);
    
    if(sp == "pt.png"){
        document.getElementById(i).src ="./img/pn.png";
    }else{
        document.getElementById(i).src ="./img/pt.png";
    }
}

感谢您提供的帮助
您做了什么？与您提供的解决方案相同：您对参数化预处理语句非常开放，应该使用参数化预处理语句，而不是手动生成查询。它们由或提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行。
function gantiimg(i){
    var img = document.getElementById(i).src;
    var sp = img.split("/");
    var sl = sp.splice(0,sp.length-1);
    
    if(sp == "pt.png"){
        document.getElementById(i).src ="./img/pn.png";
    }else{
        document.getElementById(i).src ="./img/pt.png";
    }
}