对ShowText中的文本进行着色以及调用变量？

Question

下面是我通过搜索引用的代码。通过按钮切换，showText出现在页面上的容器中。我尽力为我的问题找到解决方案，但不幸的是我什么也没找到。

我尝试对showText中的文本进行着色，并调用一个输入变量。每次我尝试做某件事时，它都会简单地将其作为注释输出。我认为有不同的方法可以做到这一点，但我仍然在努力学习JS。建议会很有帮助！

$('#gbutton').click(function () {
    $("#gjumbo").slideDown("slow");
    $("#gjumbo").slideDown(10000);
    $("#gjumbo").remove();
});

if (!$('#gbutton').click(function () {
    $("#acontainer").slideDown("slow");
    $("#acontainer").slideDown(10000);
})) {
}


 var showText = function (target, message, index, interval) {
        if (index < message.length) {
            $(target).append(message[index++]);
    //begin edit------------------------------|
            if (message[index] == '\n') {
                $(target).append("<br />");
            }
    //end edit--------------------------------|
            setTimeout(function () {
                showText(target, message, index, interval);
            }, interval);
        }
    };

    $(function () {
        showText("#msg", "test\nTest", 0, 20);
    });

编辑:添加了HTML。

<!-- Start-->
    <div id="acontainer" class="container">
        <div>
            <div class="jumbotron jumbotron-fluid">
                <div class="container">
                    <h1 class="display-4 text-center">Title</h1>
                   <div id="console" class="container">
                       <div class="container">
                           <div class="p-5" id="msg">
                           </div>
                       </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End-->

 <div id="gjumbo" class="jumbotron jumbotron-fluid bg-light">
        <div class="container">
            <h3 class="display-4 text-center">H3 Title</h3>
            <p class="lead">Sample Paragraph</p>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text fas fa-user" id="user"></span>
                </div>
                <input type="text" class="form-control" name="user" aria-label="Username or Email"
                       aria-describedby="basic-addon1" required placeholder="Username or Email">
            </div>
        </div>
        <hr class="my-4">
        <p>Sample Paragraph</p>
        <form>
            <div class="form-group">
                <label for="formControlRange">Example Range input</label>
                <input type="range" class="form-control-range" id="formControlRange">
            </div>
            <button id="gbutton" type="button" class="btn btn-dark btn-lg">Button</button>
        </form>
    </div>
</div>

Answer 1

基于你的jsfiddle，我猜你想要这样做：

1)加载用户列表，并在<div>中显示。

2)通过索引突出显示特定用户

3)当点击从(1)加载的用户时，自动填充到用户名<input type="text">

如果是，那么你可以参考下面的代码，我简化了函数，然后你可以把它移到你的代码中。

​

function loadData(target,data){
	$(target).append(data)
}

//function colorUser(target,index){
//  let item = $(target + " #user" +index)
//  item.addClass("color")
//}

loadData("#msg","<div id='user1'>User 1</div><div id='user2'>User 2</div><div id='user3'>User 3</div><div id='user4'>User 4</div><div>User 5</div>")

//colorUser("#msg",2)

$("#msg div").on("click",(e)=>{
  $("#username").val(e.target.innerHTML)
})

$("#username").on("keyup",(e)=>{
  $("#fromInput").html(e.target.value)
})

<style>
#msg div:hover{
  color:gray;
  cursor:pointer;
}

#msg div{
  color:blue;
}
</style>

<input type="text" id="username" placeholder="username">
<hr>

<div id="msg">
<h3>User Name List </h3>
<div id="fromInput"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

​

Answer 2

我修改了你的showText函数，让它按单词显示，而不是按字母显示(慢)。使用split("\n")将换行符分隔的字符串拆分成数组

​

var username,
  userFound,
  userLists = "Testing\nTesting\nTesting\nONIS\nTesting\nTesting\nTesting".split('\n');

$('#gbutton').click(function() {
  userFound = false;
  $("#msg").html('');
  username = $('input[name=user]').eq(0).val();
  if (!username) {
    alert('username empty');
    return
  }
  showText("#msg", userLists, 0, 300);
});
var showText = function(target, message, index, interval) {
  if (index < message.length) {
    // begin coloring username
    if (message[index] == username) {
      $(target).append('<span style="color:yellow">' + message[index++] + '</span><br>');
      userFound = true;
    }
    // end coloring
    else {
      $(target).append(message[index++] + '<br>');
    }
    
    if (index >= userLists.length) {
      if (!userFound)
        $(target).append('<span style="color:yellow;font-weight:bold">Username Not found</span><br>');
      return;
    }
    setTimeout(function() {
      showText(target, message, index, interval);
    }, interval);
  }
};

div#console {
  background-color: #3e3d3d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="console" class="container">
  <div class="container">
    <div class="p-5" id="msg">
    </div>
  </div>
</div>

<input type="text" class="form-control" name="user" aria-label="Username" aria-describedby="basic-addon1" required placeholder="Username" value="ONIS">
<button id="gbutton" type="button" class="btn btn-dark btn-lg">Button</button>

​