Question

我试图找出解决这个问题的方法，如果有人无法提供直接的解决方案，我会从概念方法中受益，所以我可以尝试自己解决。

我有一个包含文字表单字段的页面，每个字段都有一个对应的IconId。在页面上将列出小图像图标（PNG）。目标是当用户点击其中一个文本框时，它将激活100个图标，用户可以选择1个图标，将IconId添加到相应的隐藏字段。当用户点击已经分配了IconId的字段或隐藏字段时，他们可以选择不同的图标并交换IconId。页面将通过PHP作为标准表单发布，页面框架将是Bootstrap 3 w / jQuery 1.11。

这是一个演示用例的小提琴：http://jsfiddle.net/pitashi/xpvt214o/182828/

Answer 1

以下是使用数据属性的简单示例，..

我实际上并没有在这里使用图标，也没有用于演示目的的隐藏字段，但您可以轻松地根据需要进行更改。

var lastFocus = null;

$(document.body).on("focus", "input", function () {
  lastFocus = this;
});

$(document.body).on("click", "[data-icon-id]", function () {
  $(lastFocus).val(this.dataset.iconId).focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p>Click each LI, and you will get the id inside the last focused input field.</p>
<input /><br>
<input /><br>
<input /><br>


<ul>
  <li data-icon-id="1">Icon 1</li>
  <li data-icon-id="2">Another icon (2)</li>
  <li data-icon-id="3">It's three</li>
</ul>

Answer 2

您可以为每个输入字段添加唯一ID（例如，迭代它们输入-1，输入-2等）。然后，您可以将当前所选输入字段的ID存储到脚本的变量中。单击图标时，按保存的变量/ id选择输入字段并更新其对应的icon-id隐藏字段。

用于多个字段的单个jQuery图像选择器

2 个答案: