選択したアイコンリストの値を入力ボックスに取り込みます

Question

私はJSには新しく、アイコンを使用してパスワードジェネレータを作成しようとしています。これは、リスト内の任意の数のアイコンをクリックするように設計されており、16進コードは入力ボックスに入れられます。二つの重要なビット：

• 16進コードに関係なく、あなたが内のアイコンを選択したどのような順序入力ボックスに同じように表示されない
• あなたは、アイコンを切り替えるとuntoggleことができます。ここで

私のコードは、これまでのところです：

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

どのように私はすべてのアクティブ・李さんに列挙された値を得るのですか入力ボックス、このようなもの（もし私がcアイコン3をなめた後、1をアイコン：.text()方法で自分のテキストを取得しますli.active

とアクティブなクラスを持っている

♠☏ 

Answer 1

• 選択li要素を。
• .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); 
}); 

このコードアイコンをクリックして選択したり、選択を解除したりする順序も考慮してください。