Question

我有一个添加标签表单，其中包含输入字段和按钮。用户可以输入多个标签。标签用逗号分隔一切都运行正常，但我想使用javascript，jquery在变量中存储添加的标签值以下是我到目前为止所做的事情 -

$("#tags input").on({
        focusout: function () {
            var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
            if (txt) $("<span/>", {text: txt.toLowerCase(), insertBefore: this});
            this.value = "";   // To remove entered value after inserting comma
        },
        keyup: function (ev) {
            // if: comma|enter (delimit more keyCodes with | pipe)
            if (/(188|13)/.test(ev.which)) $(this).focusout();
        }
    });
    $('#tags').on('click', 'span', function () {
        if (confirm("Remove " + $(this).text() + "?")) $(this).remove();
    });

    $(document).on('click', '#select_all', function () {

        if (this.checked) {
            $('.all').each(function () {
                this.checked = true;
            });
        } else {
            $('.all').each(function () {
                this.checked = false;
            });
        }

    });  

$('#add_tag_btn').click(function () {    
  // Here I want to store added tags values in variable.          
        var added_tags=$('#tags span').html();
        alert(added_tags);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="tags">
    <input type="text" value="" class="form-control"   id="add_tag"placeholder="Add tag" />
  </div>
    <input type='button' class='btn btn-primary' id='add_tag_btn' value='Add'>
</form>

Answer 1

您可以在输入的焦点输出事件中将标记保存在数组中。

单击“添加”按钮时，可以通过

连接此数组的元素

＆＃13;

// Here I want to store added tags values in variable.          
var added_tags = [];

$("#tags input").on({
  focusout: function() {
    var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
    if(txt != "")
    added_tags.push(txt);
    
    if (txt) $("<span/>", {
      text: txt.toLowerCase(),
      insertBefore: this
    });
    this.value = ""; // To remove entered value after inserting comma
  },
  keyup: function(ev) {
    // if: comma|enter (delimit more keyCodes with | pipe)
    if (/(188|13)/.test(ev.which)) $(this).focusout();
  }
});
$('#tags').on('click', 'span', function() {
  if (confirm("Remove " + $(this).text() + "?"))
  {
 
  var index = added_tags.indexOf($(this).text());
  added_tags.splice(index, 1);
  $(this).remove();
  console.log(added_tags.join(","));
 }
});

$(document).on('click', '#select_all', function() {

  if (this.checked) {
    $('.all').each(function() {
      this.checked = true;
    });
  } else {
    $('.all').each(function() {
      this.checked = false;
    });
  }

});



$('#add_tag_btn').click(function() {
  console.log(added_tags.join(","));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="tags">
    <input type="text" value="" class="form-control" id="add_tag" placeholder="Add tag" />
  </div>
  <input type='button' class='btn btn-primary' id='add_tag_btn' value='Add'>
</form>

＆＃13;

Answer 2

您只需要全局声明它，然后继续向其添加标记，并在span创建代码中进行一些更改。我希望代码解释自己：

＆＃13;

var added_tags = "";
$("#tags input").on({
  focusout: function() {
    var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
    if (txt) {
      //$(this).prevAll('span').remove();
      $("<span/>", {
        text: txt.toLowerCase(),
        insertBefore: this
      });

    }
    this.value = ""; // To remove entered value after inserting comma
  },
  keyup: function(ev) {
    // if: comma|enter (delimit more keyCodes with | pipe)
    if (/(188|13)/.test(ev.which)) $(this).focusout();
  }
});
$('#tags').on('click', 'span', function() {
  if (confirm("Remove " + $(this).text() + "?")) $(this).remove();
});

$(document).on('click', '#select_all', function() {

  if (this.checked) {
    $('.all').each(function() {
      this.checked = true;
    });
  } else {
    $('.all').each(function() {
      this.checked = false;
    });
  }

});

$('#add_tag_btn').click(function() {
  // Here I want to store added tags values in variable.  
  added_tags = "";
  $('#tags input').prevAll('span').each(function() {
    added_tags += (added_tags == "" ? "" : ",") + $(this).html();
  })
  alert(added_tags);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="tags">
    <input type="text" value="" class="form-control" id="add_tag" placeholder="Add tag" />
  </div>
  <input type='button' class='btn btn-primary' id='add_tag_btn' value='Add'>
</form>

＆＃13;

编辑：动态填充代码，以便对已删除的代码进行说明

Answer 3

这是答案......

您只需循环按钮单击即可获取变量中的每个标记值。

在按钮上单击创建一次数组以获取变量

中的所有标记值

<强> HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div id="tags">
        <input type="text" value="" class="form-control"   id="add_tag"placeholder="Add tag" />
    </div>
    <input type='button' class='btn btn-primary' id='add_tag_btn' value='Add'>
</form>

<强> JS

<script>
    $("#tags input").on({
        focusout: function () {
            var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
            if (txt)
                $("<span/>", {text: txt.toLowerCase(), insertBefore: this});
            this.value = "";   // To remove entered value after inserting comma
        },
        keyup: function (ev) {
            // if: comma|enter (delimit more keyCodes with | pipe)
            if (/(188|13)/.test(ev.which))
                $(this).focusout();
        }
    });
    $('#tags').on('click', 'span', function () {
        if (confirm("Remove " + $(this).text() + "?"))
            $(this).remove();
    });

    $(document).on('click', '#select_all', function () {
        if (this.checked) {
            $('.all').each(function () {
                this.checked = true;
            });
        } else {
            $('.all').each(function () {
                this.checked = false;
            });
        }
    });
</script>

按钮点击..

 // Button Click
    $('#add_tag_btn').click(function () {
        var added_tags = [];
        i = 0;
        $('#tags span').each(function ()
        {
            added_tags[i++] = $(this).text();
        });
        alert(added_tags);
    });

我希望它对你有所帮助..

在变量中添加标签值

3 个答案: