Question

我正在尝试设置值滚动框。但是我不知道该怎么设置。

var str = "Rose, Tim, Tom";
var words = str.split(', ');
var i;
for (i = 0; i < words.length; i++) {
  $('#nameList').val(words[i])
}

.vertical-menu {
  width: 200px;
  height: 100px;
  overflow-y: auto;
  background-color: #b8d1f3;
}

.vertical-menu a.active {
  background-color: #1C84C6;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vertical-menu">
  <a href="#" class="active">List</a>
  <a href="#" id="nameList" name="nameList"></a>
</div>

我想要：图片滚动框kkk

列表
玫瑰
蒂姆
汤姆

Answer 1

正如Eddie所述，每次迭代循环时，都应使用append（）方法，因为它会覆盖nameList div中的内容。您还可以通过某种方式设置元素的格式，以确保元素在出现时被堆叠起来：

var str = "Rose, Tim, Tom";
var words = str.split(', ');
var i;
for (i = 0; i < words.length; i++) {
  //create placeholder var to format how element should be - this will create a
  //p tag with the content within. This li_element is then appended.
  let li_element = $(["<p>", words[i],"</p>"].join("\n"));
  $('#nameList').append(li_element)
}

Answer 2

如果要添加更多条目，则需要在父垂直菜单上附加更多标签。您还需要使用<br>标签来强制新行，除非您更改css以垂直设置它们的样式。这样的操作会将这些项目附加到父项.vertical-menu

var str = "Rose, Tim, Tom";
var words = str.split(', ');
var i;
for (i = 0; i < words.length; i++) {
  $('.vertical-menu').append(`<br><a href="#">${words[i]}</a>`);
}

.vertical-menu {
  width: 200px;
  height: 100px;
  overflow-y: auto;
  background-color: #b8d1f3;
}

.vertical-menu a.active {
  background-color: #1C84C6;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vertical-menu">
  <a href="#" class="active">List</a>
</div>

Answer 3

如果您要构建下拉菜单，则可以使用以下内容：

var str = "Rose, Tim, Tom";

const optionsEl = document.querySelector('#options');
str
  .split(',')
  .reduce((node, name) => {
    const li = document.createElement('li');
    const anchor = document.createElement('a');
    anchor.setAttribute('href', '#');
    anchor.innerText = name.trim();
    li.appendChild(anchor);
    node.appendChild(li);
  
    return node;
  }, optionsEl)

.vertical-menu {
  width: 200px;
  height: 100px;
  overflow-y: auto;
  background-color: #b8d1f3;
}

.vertical-menu a.active {
  background-color: #1C84C6;
  color: white;
}

<div class="vertical-menu">
    <a href="#" class="active">List</a>
    <ul id="options">
    </ul>
 </div>

Answer 4

window.onload = function() {
var str = "Rose, Tim, Tom";
var words = str.split(', ');
var listStr = '<li><a href="#" id="%id%" name="%name%">%data%</a></li>';
var i;
for (i = 0; i < words.length; i++) {
  $('#list-items').append(listStr.replace('%id%', words[i]).replace('%name%', words[i]).replace('%data%', words[i]));
}
}

.vertical-menu {
  width: 200px;
  height: 100px;
  overflow-y: auto;
  background-color: #b8d1f3;
}

.vertical-menu a.active {
  background-color: #1C84C6;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vertical-menu" id="list-items">
  <a href="#" class="active">List</a>
</div>

如何在JavaScript中的滚动框上设置值

4 个答案: