Question

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

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

到目前为止，这是我的代码：

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');
});

如何获取输入框中列出的所有活动li的值，如下所示（如果我点击了图标3，然后是图标1：

&#9824;&#9743;

Answer 1

选择包含li

li.active

使用.text()方法获取文字。
使用.val(value)方法设置输入值。

此外：

要获得html entity string而不是输入中的字符，您可以使用String.charCodeAt()方法将每个字符替换为entity string。请参阅示例中的Stringify按钮。

$('#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

Answer 2

请看一下这段代码：

https://jsfiddle.net/uvzb8a6s/9/

$('#icons li').click(function() {
  $(this).toggleClass("active");
  var oldPass = $('#pass').val();
  if ($(this).hasClass("active")) {
    oldPass = oldPass + $(this).html();
  } else {
    var textToRemove = $(this).html();
    oldPass = oldPass.replace(textToRemove, '');
  }
  alert(oldPass);
  $('#pass').val(oldPass);
});

此代码还会考虑您单击图标以选择它们的顺序以及取消选择它们。

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

2 个答案: