从动态javascript onclick函数获取图像路径

Question

我正在显示一个页面，其中包含所有产品详细信息，例如产品名称、产品详细信息、产品图片等。单个产品中有多种类型。 起初应该只显示一个产品。基于类型动态创建的单选按钮。当单击单选按钮并选择不同类型的图像时，必须更改产品颜色。我已经传递了一个值 $color 并且 productcolor 相应地发生了变化。 1.我们怎样才能改变形象？我们如何使用 img_id 检索 img ？？？ 2.选择数量后，当我发布cart.php时，数量值在cart.php中返回为0。为什么会出现这种情况？？

        <table width="1000" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="300" height="600" align ="center" ><img id ="img" src="inventory_images/<?php echo $img_id; ?>.jpg" width="300" height="400" alt=""/></td>
            <br>

        <p id = "test"><?php echo $img_id; ?></p>

            <td width="150" height = "400" align="center"  >

             <p align="left"><?php echo $name; ?></p>
             <p align ="left" id = "demo"><?php echo $color; ?></p>
             <p align = "left"><?php echo $product_detail; ?></p>

             <p align = "left">Price : $<?php echo $product_price; ?></p>


              <?php while($rows = mysqli_fetch_array($result))
    {
        $color = $rows["clr"];
        $rimg_id = $rows["img_id"];



          ?>      



<ul align="left" id="menu">
<li><p onclick="myFunction('<?php echo $color; ?>' ,'<?php echo $rimg_id; ?>');"><input   type ="radio" name="radio" id ="php" value="<?php echo $color; ?>" >
<?php echo $color; ?></p>
</li>
</ul>


 <?php } ?>

<script type="text/javascript" >
function myFunction(a,b) {


       document.getElementById("demo").innerHTML = a;
    document.getElementById("test").innerHTML = b;
    document.getElementById("imgid").value = b;
    //document.getElementById("img").src= "inventory_images/.jpg";
       //how to get my images stored in my folder??



}
</script>

 <p align = "left" style="color:#33F">Quantity</p> <input type='button' name='add' onclick='javascript: document.getElementById("qty").value++;' value='+'/>
<input type='text' name='qty' id='qty' value = '1' size = '1' />
</div><input type='button' name='subtract' onclick='javascript: subtractQty();' value='-'/>
<script type="text/javascript">
        function subtractQty(){
            if(document.getElementById("qty").value - 1 < 1)
                return;
            else
                 document.getElementById("qty").value--;
        }
        </script>




              <form id = "add" name = "Add to cart" method = "POST" action = "cart.php" >
             <p><input type = "hidden" id="imgid" name = "imgid" value =""><p>  
              <p align="left"><input type = "submit" name = "submit" id = "submit"  value = "Add to Cart" ><p>
        </form>

Answer 1

1. 您必须为每种类型创建一个 p 元素。在此期间进行。

   <ul align="left" id="menu">
   <?php while($rows = mysqli_fetch_array($result))
   {
       $color = $rows["clr"];
       $rimg_id = $rows["img_id"];
   ?>     
   <li>
   <p onclick="myFunction('<?php echo $color; ?>' ,'<?php echo $rimg_id; ?>');">
   <input type ="radio" name="radio" value="<?php echo $color; ?>">
   <?php echo $color; ?>
   </p>
   </li>
   <?php } ?>
   </ul>
   

2. 您必须在图像 src 加载器中连接函数参数 b：

   <script type="text/javascript" >
   function myFunction(a,b) {
   
   
   document.getElementById("demo").innerHTML = a;
   document.getElementById("test").innerHTML = b;
   document.getElementById("imgid").value = b;
   document.getElementById("img").src= "inventory_images/" + b +".jpg";
      //how to get my images stored in my folder??
   }
   </script>