Question

我正在尝试使用jquery进行提及系统。单击后替换数据名称时出现问题。

我已经尝试过了

$(document).ready(function(){
   $("body").on("click", ".select", function(){
      var username = $(this).attr("data-user");
	  var id = $(this).attr("id");
	  $('.vals'+id).val($('.vals'+id).val()+ username+ ' '); 
   });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="postit tag_1">
    <textarea name="" id="1" cols="60" rows="3" class="addpost vals1" placeholder="Start to type with @joh and click John Dow"></textarea>
  </div>
  <div class="postit">
    <div class="select" id="1" data-user="john">John Doe</div>
    <div class="select" id="1" data-user="justin">Justin Doe</div>
    <div class="select" id="1" data-user="ketty">Ketty Perry</div>
    <div class="select" id="1" data-user="adele">Adele</div>
    
  </div>
</div>

请尝试执行此操作，以更好地了解我的问题。编写此文本@joh，然后单击John Doe。单击@johjohn这样的文本更改后，由于@john，因此单击John Doe后应为data-user="john"。我尝试这样做：$('.vals'+id).val($('.vals'+id).val()+ username+ ' ');，但是没有用。我在这里想念的是没有人可以帮助我吗？

Answer 1

您的html包含5倍相同的ID：id="1"，但ID应该是唯一的。您可以在不使用ID的情况下进行选择，例如，仅对textarea使用ID。

按空格分隔字符串，并检查您键入的最后一个单词是否以data-user中的值开头：

$(document).ready(function() {
  $("body").on("click", ".select", function() {
    var textArea = "#" + $(this).closest("[data-textarea]").data("textarea");
    var words = $(textArea).val().split(' ');
    if (words.length > 0) {
      var username = $(this).attr("data-user");
      if (words[words.length - 1].startsWith('@')) {
        words[words.length - 1] = "@" + username;
        $(textArea).val(words.join(' '));
      }

    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="postit tag_1">
    <textarea name="" id="textarea1" data-textarea="textarea1" cols="60" rows="3" class="addpost vals1" placeholder="Start to type with @joh and click John Dow"></textarea>
  </div>
  <div class="postit" data-textarea="textarea1">
    <div class="select" data-user="john">John Doe</div>
    <div class="select" data-user="justin">Justin Doe</div>
    <div class="select" data-user="ketty">Ketty Perry</div>
    <div class="select" data-user="adele">Adele</div>

  </div>
</div>

Answer 2

HTML

<div class="container">
  <div class="postit tag_1">
    <textarea name="" id="1" cols="60" rows="3" class="addpost vals1" placeholder="Start to type with @joh and click John Dow"></textarea>
  </div>
  <div class="postit">
    <div class="select" data-user="john">John Doe</div>
    <div class="select" data-user="justin">Justin Doe</div>
    <div class="select" data-user="ketty">Ketty Perry</div>
    <div class="select" data-user="adele">Adele</div>

  </div>
</div>

JS

$(document).ready(function(){
   var postit_textarea = $("#1");
   $("body").on("click", ".select", function(){
      var username = $(this).attr("data-user");

        $(postit_textarea).val('@' + $(this).attr('data-user')); 
   });
  });

JSFIDDLE

https://jsfiddle.net/guruling/9g5u0c2q/4/

如果您只有一个Textarea，则无需获取每次“选择”项单击的ID。

单击选择后放置数据用户

2 个答案: