如何使用javascript在html循环中获取动态ID的值


How to get value of dynamic id in an html loop with javascript?

我正在使用redips javascript创建一个拖放系统。

这是我使用 html 和 php 生成数据的脚本

<div id="base">  
   <table>
     <tbody>
       <?php 
          foreach($deviceID as $row)
          { 
             echo '<tr><td><div class="drag">'.$row['description'].'<input type="hidden" id="bus" value="'.$row['description'].'"></div></td></tr>'; 
          }
        ?>
       </tbody>
    </table>
</div>

这是我的javascript文件的片段。

var redips_init;
redips_init = function () {
    // reference to the REDIPS.drag
    var rd = REDIPS.drag;
    // initialization
    rd.init();
        rd.drop_option = 'shift';
    rd.animation_shift = true;
        rd.myhandler_dropped = function () {            
            alert($('#bus').val());
        }
};

我不擅长 php,但我通常在 jsp 中做的是创建一个局部索引变量并将其附加到循环中的每个 ID 属性。

所以你的代码看起来像这样

  <?php 
      $index=0;    
      foreach($deviceID as $row)
          { 
             echo '<tr><td><div class="drag">'.$row['description'].'<input type="hidden" id="bus'.$index++.'" value="'.$row['description'].'"></div></td></tr>'; 
          }
        ?>

在javascript中,你的dragAndDrop事件应该返回一个索引位置,通过它你可以得到适当的值。

现在,您可以在 JavaScript 中使用此动态 ID 来执行任何您想做的事情。

REDIPS.drag包含save_content()方法,用于扫描表中的所有DIV元素并将结果作为查询字符串JSON对象返回。输入参数是表 ID 和返回结果的类型(默认值为查询字符串)。如果这还不够好,您可以搜索 save_content() 源并进行自定义。方法很简单,它使用多个循环来扫描表内容。

另一方面,如果您需要知道可以在事件处理器中写入的丢弃myhandler_dropped DIV 元素的 ID。以下是代码片段:

rd.myhandler_dropped = function () {
    // define DIV id
    var id = rd.obj.id;
    // write DIV id to the console
    console.log(id)
};

希望这个答案会有所帮助。