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

Posted 2023-02-24

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

【英文标题】：How to set backgroundcolor and border for each array element using javascript or jquery?

【发布时间】：2021-01-21 08:58:32

【问题描述】：

我正在尝试使用 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>

【问题讨论】：

你试过循环元素来设置css吗？

【参考方案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>

【讨论】：

如何从列表中选择一个元素？

假设'list'是一个数组，然后是它的索引，例如。 foo[0]。如果这不是你的意思，我需要更多信息

啊，你是说你正在创建的标签？将事件处理程序挂钩到它们。

我需要类似数组 ['Java', 'Python','HTML', 'Css',].. 当我专注于输入类型时，我应该得到一个要选择的项目列表。希望我清楚

这就是所谓的自动完成控件。如果您想建立自己的，我建议您提出一个新问题

【参考方案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>

【讨论】：

如何从列表中选择一个元素？我需要类似数组 ['Java', 'Python','HTML', 'Css',].. 当我专注于输入类型时，我应该得到一个要选择的项目列表。我该如何实现？

这是自动完成行为。您可以使用<datalist> 元素或建立自己的行为。

【参考方案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>

【讨论】：

如何从列表中选择一个元素？我需要类似数组 ['Java', 'Python','HTML', 'Css',].. 当我专注于输入类型时，我应该得到一个要选择的项目列表。我怎样才能做到这一点？跨度>

列表来自下拉/选择框？

列表是下拉列表

您能否将您的 html（下拉菜单）粘贴到您的问题中，以便我可以在答案中更改它？

我还没有实现下拉，因为我正在探索第一步..

【参考方案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>

【参考方案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 的类。

【讨论】：

如何从列表中选择一个元素？我需要类似数组 ['Java', 'Python','HTML', 'Css',].. 当我专注于输入类型时，我应该得到一个要选择的项目列表。我该如何实现？

@Mohammedzuhair 这不是<select> 输入吗？

不需要我从数据库中传递它吗？

@Mohammedzuhair 查看编辑中的动态示例。