多个字段的单个jQuery图像选择器
多个字段的单个jQuery图像选择器
提问于 2018-06-05 03:28:48
我正在试图找出解决这个问题的方法，如果有人不能提供直接的解决方案，我将从概念性方法中受益，这样我就可以尝试自己解决它。
我有一个包含文本表单字段的页面，每个字段都有一个对应的IconId。页面上将是小图像图标(PNG)的列表。目标是当用户点击其中一个文本框时，它将激活100个图标，用户可以选择1个图标，这将添加IconId到相应的隐藏字段。当用户单击已经分配了IconId的字段或在隐藏字段中单击时，他们可以选择不同的图标并替换掉IconId。页面将通过PHP提交为标准表单post，页面框架将是Bootstrap3与jQuery 1.11。
这是一个演示用例的小提琴：http://jsfiddle.net/pitashi/xpvt214o/182828/
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-05 03:47:53
下面是一个使用数据属性的简单示例。
我实际上没有在这里使用图标，或者用于演示目的的隐藏字段，但它应该很容易为您的需要进行更改。
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>
Stack Overflow用户
发布于 2018-06-05 03:45:03
您可以为每个输入字段添加一个唯一的id (例如，迭代它们input-1、input-2等)。然后，您可以将当前所选输入字段的id存储到脚本的变量中。单击图标时，您可以通过保存的变量/id选择输入字段，并更新其相应的icon-id隐藏字段。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50687531
复制相关文章
相似问题
腾讯云开发者
