首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >多个字段的单个jQuery图像选择器

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

Stack Overflow用户
提问于 2018-06-05 03:28:48
回答 2查看 90关注 0票数 0

我正在试图找出解决这个问题的方法,如果有人不能提供直接的解决方案,我将从概念性方法中受益,这样我就可以尝试自己解决它。

我有一个包含文本表单字段的页面,每个字段都有一个对应的IconId。页面上将是小图像图标(PNG)的列表。目标是当用户点击其中一个文本框时,它将激活100个图标,用户可以选择1个图标,这将添加IconId到相应的隐藏字段。当用户单击已经分配了IconId的字段或在隐藏字段中单击时,他们可以选择不同的图标并替换掉IconId。页面将通过PHP提交为标准表单post,页面框架将是Bootstrap3与jQuery 1.11。

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-05 03:47:53

下面是一个使用数据属性的简单示例。

我实际上没有在这里使用图标,或者用于演示目的的隐藏字段,但它应该很容易为您的需要进行更改。

代码语言:javascript
复制
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();
});
代码语言:javascript
复制
<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>

票数 1
EN

Stack Overflow用户

发布于 2018-06-05 03:45:03

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50687531

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档