Question

我很想根据条件创建按钮。例如，对于术语yellow创建3个按钮，对于blue术语创建5个按钮，依此类推。

// color = yellow

if (color == 'yellow')
{
   //create 3 button on html
}
if (color == 'blue')
{
  //create 5 button on html
}

//and so on

HTML结果

   <a href="1" class="btn btn-default">1</a> 
   <a href="2" class="btn btn-default">2</a> 
   <a href="3" class="btn btn-default">3</a>

Answer 1

也许你是这个意思

const colors = {
  "yellow": 3,
  "blue": 5
};
[...document.querySelectorAll(".btnContainer")].forEach(function(container) {
  const color = container.getAttribute("data-color");
  const numLinks = colors[color]
  container.style.backgroundColor=color;
  for (let i = 0; i < numLinks; i++) {
    let a = document.createElement('a');
    a.textContent = (i + 1);
    a.href = (i + 1);
    a.classList.add('btn', 'btn-default');
    container.appendChild(a);
  }
})

a { opacity:.7; margin:5px }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="btnContainer" data-color="yellow"></div>
<div class="btnContainer" data-color="blue"></div>

Answer 2

您可以创建这样的链接

var a = document.createElement('a');
var linkText = document.createTextNode("my title text");
a.appendChild(linkText);
a.title = "my title text";
a.href = "http://example.com";
document.body.appendChild(a);

如何根据条件创建按钮？

2 个答案: