Question

我正在尝试检索每个 value输入中的.item作为可移动标签，可以在每个项目的.tags列表中附加/删除更多标签。

问题在于，每个“ .tag”包装器都在填充“值”数据，而不仅仅是嵌套输入的单个项。

如何更改功能以使其在每个项目上运行？

$(".item").each(function() {
  // create stored tags
  var $data = $(this).find(".tags-area").attr("data-value");
  if ($data) {
    var $split = $data.split(" ");
    $.each($split, function(number) {
      $('<div class="tag-term"  />')
        .appendTo(".tags")
        .append($split[number])
        .append('<a class="close" href="#">x</a>');
    });
  }

  //create tag
  var tagged = function() {
    var $tag = $(".tags-area").val();
    if ($tag) {
      $('<div class="tag-term"  />')
        .appendTo(".tags")
        .append($tag)
        .append('<a class="close" href="#">x</a>');
      $(".tags-area").val("");
    }
  };

  //catch enter
  $(".tags-area").on("keypress", function(e) {
    if (e.keyCode == 13) {
      event.preventDefault();
      tagged();
    }
  });

  //remove tag
  $(".tags").on("click", ".tag-term a", function() {
    $(this)
      .parent()
      .remove();
  });

  //remove tag backspace
  $(".tags-area").on("keydown", function(e) {
    if (e.keyCode == 8) {
      var $caret = $(".tags-area").getCursorPosition();
      if ($caret === 0) {
        $(".tags .tag-term")
          .last()
          .remove();
      }
    }
  });

  //get caret position
  $.fn.getCursorPosition = function() {
    var el = $(this).get(0);
    var pos = 0;
    if ("selectionStart" in el) {
      pos = el.selectionStart;
    } else if ("selection" in document) {
      el.focus();
      var Sel = document.selection.createRange();
      var SelLength = document.selection.createRange().text.length;
      Sel.moveStart("character", -el.value.length);
      pos = Sel.text.length - SelLength;
    }
    return pos;
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper" style="display:flex">
  <div class="item">
    <div class="tags"></div>
    <textarea placeholder="Add a tag..." class="tags-area" data-value="alpha beta gamma"></textarea>
  </div>
  <div class="item">
    <div class="tags"></div>
    <textarea placeholder="Add a tag..." class="tags-area" data-value="new two three"></textarea>
  </div>
</div>

Answer 1

对于初始数据加载：

$(".item").each(function() {
    // create stored tags
    var $data = $(this).find(".tags-area").data("value");

    if ($data) {
        var tags = $(this).find(".tags");
        var $split = $data.split(" ");

        $.each($split, function(index) {
            $('<div class="tag-term" />')
                .appendTo(tags)
                .append($split[index])
                .append(' <a class="close" href="#">x</a>');
        });
    }
});

然后，这会将标签添加到.tags与.item相同的.tags-area中：

  //create tag
  var tagged = function(area) {
      var $tag = $(area).val();

      if ($tag) {
          var tags = $(area).parents('.item').find('.tags');
          $('<div class="tag-term" />')
              .appendTo(tags)
              .append($tag)
              .append(' <a class="close" href="#">x</a>');
          $(area).val("");
      }
  };

  //catch enter
  $(".tags-area").on("keypress", function(event) {
      if (event.keyCode == 13) {
          event.preventDefault();

          tagged(event.target);
      }
  });

jQuery-将标签添加/删除到每个项目的列表

1 个答案: