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

以下是小提琴的链接，可以按照您的意愿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框架。

Answer 2

Ids必须唯一这将在输入中没有id="prefix"和id="logoimage"的情况下有效。

$('input[type="image"]').on("click", function() {
    $("#hideme").val($(this).prev("input").val());
});

fiddle

通过jQuery将动态生成的输入值传递给隐藏输入

2 个答案: