javascript - 将选定的图标列表值放入输入框中

Question

我是 JS 新手，我正在尝试使用图标制作密码生成器。它的设计使您可以单击列表中任意数量的图标，然后将十六进制代码放入输入框中。两个重要的部分:

• 无论您选择图标的顺序如何，输入框中显示的十六进制代码都相同。
• 您可以切换和取消切换图标。

这是迄今为止我的代码:

https://jsfiddle.net/uvzb8a6s/1/

HTML

<input id="pass">
<ul id="icons">
<li class="icon">&#9824;</li>
<li class="icon">&#9742;</li>
<li class="icon">&#9743;</li>
<li class="icon">&#9744;</li>
</ul>

JS

$('#icons li').click(function() {
    $(this).toggleClass( "active" ); 
    $('#pass').text('#icons li');
});

如何获取输入框中列出的所有事件李的值，如下所示(如果我单击图标三，然后单击图标一:

♠☏

Answer 1

• 选择具有 li.active 事件类的 li 元素
• 通过 .text() 获取他们的短信方法。
• 使用 .val(value) 设置输入值方法。

另外:

• 要获取 html 实体字符串 而不是输入中的字符，您可以使用 String.charCodeAt() 将每个字符替换为其实体字符串方法。请参阅示例中的“字符串化”按钮。

$('#icons li').click(function() {
  $(this).toggleClass("active");
  $("#pass").val($("#icons li.active").text());
});

$("button").on("click", function() {
  $("#pass").val($("#pass").val().replace(/(.)/g, function(char) {
    return "&#" + char.charCodeAt() + ";";
  }));
});

ul li {
  list-style: none;
  display: inline;
}
.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="pass">
<button>Stringify</button>
<ul id="icons">
  <li class="icon">&#9824;</li>
  <li class="icon">&#9742;</li>
  <li class="icon">&#9743;</li>
  <li class="icon">&#9744;</li>
</ul>

Updated jsFiddle