如何使用 javascript 或 jquery 为每个数组元素设置背景颜色和边框？

Question

我正在尝试使用 JavaScript like this 为数组中的每个元素设置单独的背景和边框。到目前为止，我所做的output如下。当我向数组中添加一个新元素时，它会拉伸背景。

let skills = [];

function displayname() {
  console.log(document.getElementById("namehere").value);
  x = document.getElementById("namehere").value;
  skills.push(x);
  console.log(skills)
  document.getElementById("skill-set").innerHTML = skills
  document.getElementById("skill-set").style.border = "1px solid blue";
  document.getElementById("skill-set").style.backgroundColor = "yellow";
  document.getElementById("skill-set").style.padding = "5px";
  document.getElementById("skill-set").style.display = "inline-block";
  document.getElementById('namehere').value = " ";
}

<label>Enter the skills: </label><br>
<input type=t ext id="namehere" onchange="displayname()">
<div id="skill-set"></div>

Answer 1

要实现您所描述的内容，您应该将每个标签分成自己的元素。这样背景和边框仅适用于该特定标签。

此外，您应该直接通过 CSS 设置样式规则，而不是在创建它们时对每个元素进行设置。试试这个：

let skills = [];
let skillSet = document.querySelector('#skill-set');

document.querySelector('#namehere').addEventListener('change', e => {
  skills.push(e.target.value);
  e.target.value = '';
  displaySkills();
});

let displaySkills = () => {
  let tags = skills.map(skill => `<span>${skill}</span>`).join('');
  skillSet.innerHTML = tags;
}

#skill-set span {
  display: inline-block;
  border: 1px solid blue;
  background-color: yellow;
  padding: 5px;
  margin: 5px 5px 0 0;
}

<label>Enter the skills: </label><br>
<input type="text" id="namehere" />
<div id="skill-set"></div>

Answer 2

不要将数组设置为innerHTML 值，而是尝试循环遍历skills 数组并为每个技能创建一个元素。通过这种方式，您可以添加类或其他属性来识别这些元素并通过 CSS 设置它们的样式。

let skills = [];
const nameHere = document.getElementById("namehere");
const skillSet = document.getElementById("skill-set")

function displayname() {
  let skill = nameHere.value;
  skills.push(skill);
  while(skillSet.firstElementChild) {
    skillSet.firstElementChild.remove();
  }
  skills.forEach(function(skill) {
    let div = document.createElement('div');
    div.classList.add('skill');
    div.textContent = skill;
    skillSet.append(div);
  });
  nameHere.value = '';
}

#skill-set {
  display: flex;
  margin-top: 5px;
}

.skill {
  border: 1px solid blue;
  background-color: yellow;
  padding: 5px;
}

.skill + .skill {
  margin-left: 5px;
}

<label>Enter the skills: </label><br>
<input type=t ext id="namehere" onchange="displayname()">
<div id="skill-set"></div>

Answer 3

为什么不创建 div ？喜欢：

function displayname(el) {
  var skilldiv = document.getElementById("skill-set");
  var div = document.createElement("div");
  div.classList.add("mystyle");
  var content = document.createTextNode(el.value); 
  div.appendChild(content);  
  skilldiv.appendChild(div);
}

#skill-set div {
  display: inline-block;
  border: 1px solid blue;
  background-color: yellow;
  padding: 5px;
  margin: 5px 5px 0 0;
}

<label>Enter the skills: </label><br>
<input type="text" id="namehere" onchange="displayname(this)">
<div id="skill-set"></div>

每次设置新技能时，函数都会创建一个新的div。

编辑您的评论：

function displayname(el) {
  var skilldiv = document.getElementById("skill-set");
  var div = document.createElement("div");
  div.classList.add("mystyle");
  var content = document.createTextNode(el.value); 
  div.appendChild(content);  
  skilldiv.appendChild(div);
}

#skill-set div {
  display: inline-block;
  border: 1px solid blue;
  background-color: yellow;
  padding: 5px;
  margin: 5px 5px 0 0;
}

<label>Enter the skills: </label><br>
<select name="namehere" id="namehere" onChange="displayname(this)">
  <option value=""></option>
  <option value="java">Java</option>
  <option value="php">PHP</option>
  <option value="html">Html</option>

</select>
<div id="skill-set"></div>

Answer 4

您可以创建一个新元素并附加它，而不是在同一个 div 中附加文本。这样，样式可以用于每个单独的项目。

通过使用 CSS 类而不是 JS，我们不必每次都设置样式，但我们只需附加类名即可。

const skills = [];

const skillSet = document.getElementById("skill-set");
const input = document.getElementById("namehere");

function displayname() {
  const skill = document.createElement("span");
  skill.textContent = input.value;
  skill.classList.add("box");
  
  skillSet.appendChild(skill);
  
  skills.push(input.value);
  
  input.value = " ";
}

.box {
  border: 1px solid blue;
  background: yellow;
  padding: 5px;
  margin: 5px 5px 0 0;
  display: inline-block;
}

<label>Enter the skills: </label><br>
<input type=t ext id="namehere" onchange="displayname()">
<div id="skill-set"></div>

Answer 5

更新

如果您想要一个预先输入的列表，您可以尝试以下方法。

改编自这段代码：http://jsfiddle.net/bebarr89/tZDAd/

const skills = [ 'Java', 'JavaScript', 'Perl', 'Python', 'HTML', 'CSS' ];
const selectedSkills = new Set();

const autoComplete = document.querySelector('.autocomplete input');
const autoCompleteList = document.querySelector('#autocomplete-list');
const skillSet = document.querySelector('#skill-set');

autoComplete.addEventListener('keyup', dropdownShow);
autoComplete.addEventListener('change', dropdownShow);
autoComplete.addEventListener('focus', dropdownShow);

function addToSkills(skill) {
  const skillItem = document.createElement('div'); // Create element
  skillItem.textContent = skill; // Set element text
  skillItem.classList.add('skill');
  skillSet.appendChild(skillItem);
}

function dropdownHide() {
  autoCompleteList.innerHTML = '';
  autoCompleteList.style.display = 'none';
}

function dropdownShow() {
  if (!autoComplete.value) {
    dropdownHide();
    return;
  }
  const expression = new RegExp('^' + autoComplete.value, 'i');
  const fragment = document.createDocumentFragment();
  
  skills.sort()
    .filter(skill =>
      !selectedSkills.has(skill) && expression.test(skill))
    .forEach(skill => {
      var item = document.createElement('div');
      item.classList.add('autocomplete-item');
      item.innerText = skill;
      item.addEventListener('click', selectAndClose);
      fragment.appendChild(item);
    });
  if (fragment.children.length) {
    autoCompleteList.innerHTML = '';
    autoCompleteList.style.display = 'block';
    autoCompleteList.appendChild(fragment);
    return;
  }
  dropdownHide();
}

function selectAndClose(e) {
  const skill = this.textContent;
  autoComplete.value = skill;
  if (!selectedSkills.has(skill)) {
    selectedSkills.add(skill);
    autoComplete.value = ''; // Clear?
    addToSkills(skill);
  }
  dropdownHide();
}

#skill-set {
  margin-top: 0.5em;
}

.skill {
  display: inline-block;
  margin-right: 0.5em;
  border: 1px solid blue;
  background-color: yellow;
  padding: 5px;
  display: inline-block;
}

.autocomplete {
  display: inline-block;
}

.autocomplete input {
  border: 1px solid silver;
  outline: none;
  margin: 0;
  background: #fff;
  padding: 0.25em;
}

#autocomplete-list {
  border: 1px solid silver;
  border-top: 0;
  position: absolute;
  overflow: auto;
  max-height: 93px;
  background: #fff;
}

.autocomplete input, #autocomplete-list {
  width: 200px;
  box-sizing: border-box;
}

#autocomplete-list .autocomplete-item {
  padding: 0.25em;
}

#autocomplete-list .autocomplete-item:nth-child(2n+1) {
  background: #f6f6f6;
}

#autocomplete-list .autocomplete-item:hover {
  background: #e5e5e5;
  cursor: pointer;
}

<form name="skills" onsubmit="return false">
  <label>Choose skill(s):</label>
  <div class="autocomplete">
    <input type="text" name="skill" autocomplete="off">
    <div id="autocomplete-list" style="display:none"></div>
  </div>
</form>
<div id="skill-set"></div>

---

您需要为添加的每个技能创建一个新元素。不要修改整个div的内部HTML。

const input = document.getElementById('namehere');
const skillSet = document.getElementById('skill-set');
const skills = [];

function displayname() {
  const value = input.value.trim(); // Capture value
  input.value = ''; // Reset field
  skills.push(value); // Add text to skill list
  const skillItem = document.createElement('div'); // Create element
  skillItem.textContent = value; // Set element text
  skillItem.classList.add('skill');
  // Apply style
  Object.assign(skillItem.style, { 
    border : "1px solid blue",
    backgroundColor : "yellow",
    padding : "5px",
    display : "inline-block"
  });
  skillSet.appendChild(skillItem);
}

#skill-set {
  margin-top: 0.5em;
}

.skill {
  display: inline-block;
  margin-right: 0.5em;
}

<label>Enter the skills: </label><br>
<input type="text" id="namehere" onchange="displayname()">
<div id="skill-set"></div>

另外，不要通过 JavaScript 应用样式，只需添加一个带有 CSS 的类。