javascript - 显示隐藏按钮时未内联

Question

我有一个 html 页面，上面有一个名为 new 的按钮。

function handle_new() {
  document.getElementById('coki').style.display = "block";
  document.getElementById('btn_new1').style.display = "block";
  document.getElementById('btn_new2').style.display = "block";
  document.getElementById('btn_new2').style.display = "none";
  document.getElementById('btn_new4').style.display = "block";
}

.inline {
  display: inline-block;
}

<p>
  <button class="button button3" id="btn_new" type="button" onclick="handle_new();">New</button>
</p>

<div class="inline" id="coki" style="display: none">
  <button class="inline" id="btn_new1" type="button" onclick="handle_new1();">New</button>
  <button class="inline" id="btn_new2" type="button" onclick="handle_new2();">New</button>
  <button class="inline" id="btn_new3" type="button" onclick="handle_new3();">New</button>
  <button class="inline" id="btn_new4" type="button" onclick="handle_new4();">New</button>
  <button class="inline" id="btn_new5" type="button" onclick="handle_new5();">New</button>
</div>

当有人点击此按钮时，会显示 5 个按钮(在 coki div 中)，但始终位于彼此下方且不在同一行。问题是我也在按钮和 div 标签中包含了内联，但由于某种原因，当我添加“不显示”时，它们总是出现在彼此下方而不是彼此相邻。

Td 标签和 p 标签代替 div 也不起作用。解决办法是什么？谢谢

Answer 1

创建一个 display: none 类。 将其分配给所需的元素。
单击按钮时，只需删除 none className。
元素应该返回到其初始状态(内联 block )

function handle_new() {
  document.getElementById('coki').classList.remove("none");
}

.inline {
  display: inline-block;
}

.none {
  display: none;
}

<p>
  <button class="button button3" id="btn_new" type="button" onclick="handle_new();">New</button>
</p>

<div class="inline none" id="coki">
  <button class="inline" id="btn_new1" type="button" onclick="handle_new1();">New</button>
  <button class="inline" id="btn_new2" type="button" onclick="handle_new2();">New</button>
  <button class="inline" id="btn_new3" type="button" onclick="handle_new3();">New</button>
  <button class="inline" id="btn_new4" type="button" onclick="handle_new4();">New</button>
  <button class="inline" id="btn_new5" type="button" onclick="handle_new5();">New</button>
</div>

P.S:通过查看您的handle_newNNN()，我担心您正在重复大量 JS 代码...但那是另一天的主题了。

---

嗯，如果我猜对了你在做什么——那就是
有一个新建按钮来创建元素。等等。我的做法如下:

var btnNew = document.getElementById("btn_new");
var elCoki = document.getElementById("coki");
var itemsTot = 0; // Currently 0 items created. We'll increment on creation
var itemsMax = 5; // max number of new items

function newItem() {
  itemsTot += 1;
  var item = document.createElement('div');
  item.classList.add("item")
  item.innerHTML = "THIS IS ITEM n."+ itemsTot +" !";
  elCoki.appendChild(item);
  // Disable button
  if(itemsTot >= itemsMax) {
    btnNew.disabled = true;
    btnNew.classList.add("none");
  }
}

btnNew.addEventListener("click", newItem);

.item {
  background: orange;
  padding: 4px; margin: 2px 0;
}
.none {
  display: none;
}

<div id="coki"></div>
<button class="button button3" id="btn_new" type="button">+ New Item</button>