-1

入力ボックスのテキスト (24 個の数字のみを許可) を持つ小さな関数を作成しており、24 個の数字を入力した後、値が格納されます<div><span>value from input</span></div>

後でjQueryを使用して、フェードイン効果を作成したいと思います。

私の質問は、この現在のスクリプトを再作成してデータを保存し、毎回span新しいスクリプトを作成しないようにする方法です。input

例 jsFiddle

値をカウントする方法とそれらを var_dump する方法を教えてください。後でデータベースクエリを実行したくないからです。

4

2 に答える 2

1

HTML:

<form>
    <span class="input-component"><input type="text"/><a href=#></a></span>
 </form>
<br><br>
<div id="numcontainer">
    <br>
</div>

Javascript:

$('form .input-component input').on("propertychange keyup input paste", addInput);

function addInput() {
  var remainingChars = $(this).val().length;
  if (remainingChars == 24) {

    var $newNumSpan = $('<span class="containernum">');
    $newNumSpan.text( $(this).val() );

    $('#numcontainer').append($newNumSpan); // <span class="containernum">1234...</span>
    $('#numcontainer').append('<a class="js-delete" href="#">[X]</a>');
    $('#numcontainer').append('<br>');

    $(this).val(''); // does empty the text input

    values.push($(this).val());
    console.log(values);
  }
}

#numcontainerまた、関連付けられた [X] リンクをクリックしたときに「数値エントリ」を削除するために、このハンドラーを DOM ノードにアタッチする必要があります。

jQuery(function($) {

    var values = [];

    $('#numcontainer').on('click', 'a.js-delete', function(e) {
      $(this).prev().remove(); // the <span>
      $(this).next().remove(); // the <br>
      $(this).remove(); // the <a> itself
    });
    // ...
于 2013-11-12T18:33:47.813 に答える
1

これは、スパンに 24 文字を格納するために機能するはずです。

$('.fieldclass').on('keyup', function(){
    if ($(this).val().length == 24) {
        $('span').text($(this).val()); // Update span to the value.
    }
});

または、ユーザーがキーを押すたびにスパンを更新したい場合。

$('.fieldclass').on('keyup', function(){
    $('span').text($(this).val()); // Update span to the value.
});
于 2013-11-12T18:28:16.000 に答える