javascript - 通过 jQuery 将动态生成的输入值传递到隐藏的输入中

Question

我需要有关 jQuery 解决方案的帮助，以将动态生成的值传递给隐藏的输入:

    <input type="hidden" id="hideme" value="">

动态生成的值是:

    <?php $sql=mysql_query("SELECT * FROM table"); ?>
    <?php while($rows = mysql_fetch_array($sql)) { ?>                       
    <input type="hidden" name="prefix" id="prefix" value="<?php echo $rows['CardPrefix']; ?>">
    <input type="image" id="logoimage" src="/assets/uploads/<?php echo $rows['Logo']; ?>" />
    <?php } ?>

我尝试了几个来自 StackOverflow 的 jQuery 脚本，但它们似乎对我不起作用，因为输入值和图像都是动态生成的，我无法弄清楚如何通过单击相应图像将特定值插入隐藏输入。

任何帮助将不胜感激。

问候。

Answer 1

这是 fiddle 的链接，它可以按您的意愿工作 http://jsfiddle.net/xqn6v6wp/

$( document ).ready(function() {
  $(".clickableImage").click(function(event) {
    var dynamicValue = $(this).data('dynamic');
    alert('Button pressed with value: '+dynamicValue);
    $('#hideme').val(dynamicValue);
  });
});

我去掉了您图像中的 id，因为它们不是唯一的，并且您在这种方法中不需要它们。并使 hideme 可见，以便您可以在此演示中看到它(当您隐藏它时，它的行为相同):

<input id="hideme" value="">

<input class="clickableImage" type="image" src="/assets/aaa" data-dynamic="1"/>
<input class="clickableImage" type="image" src="/assets/bbb" data-dynamic="20"/>
<input class="clickableImage" type="image" src="/assets/ccc" data-dynamic="333"/>

这是一种更动态的方法，我给每个图像一个 clickableImage 类，然后在 javascript 中附加一个事件给它(所以你可以有 1 个或 100 个，它们将是相同的代码)。在事件处理程序中，我将从单击的 html 标记中获取数据字段。您可以使用数据属性将一些信息发送到您的 javascripts http://www.w3schools.com/tags/att_global_data.asp它比旁边有额外的隐藏输入要现代得多。

这是一种非常简单的方法，而且非常稳健，独立于 ID，您可以控制它在哪些图像上工作以及在哪些图像上不工作(通过添加 clickableImage 类)。从理论上讲，它应该适用于任何 html 标签，而不仅仅是图像。而且它很干净，因为您的动态值与一个 html 标记中的图像一起，您不必拥有两个，所有信息都是独立的。

PS:为此您需要包含 jQuery javascript 框架。