如何使 JavaScript 动态化？答案

【问题标题】：How to make JavaScript dynamic?如何使 JavaScript 动态化？
【发布时间】：2017-08-12 06:33:43
【问题描述】：

我想在循环中移动document.getElementById("b")。可以吗？我怎样才能做到这一点？

<img class="img-responsive pic" id="picture" src="images/step1.png">
 <?php
                    //get rows query
                    $query = $db->query("SELECT * FROM `template_design` WHERE `panel` = 'front'");    

                    if($query->num_rows > 0){ 
                        while($row = $query->fetch_assoc()){
                         $im_id = $row['id'];
                         $images = "images/" .$row['image']. "";                           
                    ?>
                 <div class="col-md-4 col-sm-4 wel-grid wow fadeInDown">
                    <div class="wel11">
                        <input type="radio" id="<?php echo 'radio_'.$im_id; ?>" name="front" onClick="changeSrc(<?php echo  $im_id; ?>)">
                       <label  for="<?php echo 'radio_'.$im_id; ?>"  style="font-size:12px; cursor: pointer;">
                       <img  id="<?php echo 'picture_'.$im_id; ?>" style="border: 1px solid #ccc;" class="img-responsive" src="<?php echo $images; ?>"></label>
                    </div>
                 </div>
             <?php } } ?>

     <script type="text/javascript">
     function changeSrc(id) {
        if (document.getElementById("radio_"+id).checked) {
     document.getElementById("picture_"+id).src = "images/Ppicture3.png";
        }
}
    </script>

我想在循环中重复它，因为 fradio0 即 $front 会增加，JavaScript 也会在循环中重复以匹配每个。

【问题讨论】：

你在脚本上漏掉了一个“}”
以上代码已编辑，此处略过。
现在解决了还是还有问题？
我仍然面临如何在 id 增加时使其动态化的问题

标签： javascript php loops

【解决方案1】：

您可以使用您的 id 传递参数，例如：

 <input type="radio" id="<?php echo 'radio_'.$im_id; ?>" name="<?php echo $fname; ?>" onClick="changeSrc(<?php echo  $im_id; ?>)">

并在像

这样的脚本上使用它

  <script type="text/javascript">
     function changeSrc(id) {
        if (document.getElementById("radio_"+id).checked) {

        }
     }
    </script>

【讨论】：

感谢您的回答，但出现“未捕获的 SyntaxError: Unexpected end of input”错误
你能用你的问题更新修改后的代码，以便我可以确定你在哪里犯了错误。
代码中的 id "picture" 在哪里 { document.getElementById("picture").src = "images/Ppicture3.png}";
像 id="" 一样添加图像 id，然后像 document.getElementById("picture_"+id) 这样进入 javascript 希望这是问题所在在您的代码中

【解决方案2】：

请试试这个。将无线电 id 作为 attr id 传递并按各自的 id 保存每个图像，然后是各自的 id.png。同时从您的 html 代码中删除 onclick 功能。

<script type="text/javascript">
  $("input:radio[name=front]").click(function() {
    var id= $(this).attr('id');
    document.getElementById("picture").src = "panel/front/" + id + ".png";
    });
</script>

【讨论】：