Question

我正在尝试将javascript包含到从该字段收集构造数据的表单应用程序中。我已经用Google搜索了这个垃圾，但我无法弄清楚在数组中保存html元素是否合法（或者如果我的语法正确的话）。

所需的结果是单击“ADD WELD”按钮，然后显示表单和取消按钮，同时隐藏页面上的所有其他按钮和表单。

以下代码不起作用，我可能会以错误的方式解决这个问题。

button {
  border: none;
  display: inline;
  background: #f5f5f5;
  background-image: -webkit-linear-gradient(top, #f5f5f5, #d6d6d6);
  background-image: -moz-linear-gradient(top, #f5f5f5, #d6d6d6);
  background-image: -ms-linear-gradient(top, #f5f5f5, #d6d6d6);
  background-image: -o-linear-gradient(top, #f5f5f5, #d6d6d6);
  background-image: linear-gradient(to bottom, #f5f5f5, #d6d6d6);
  font-weight: bold;
  color: black;
  font-size: 10px;
  padding: 0px 10px 0px 10px;
  height: 25px;
  text-decoration: none;
  cursor: pointer;
}
button:hover {
  background: #b8b8b8;
  background-image: -webkit-linear-gradient(top, #b8b8b8, #7a7a7a);
  background-image: -moz-linear-gradient(top, #b8b8b8, #7a7a7a);
  background-image: -ms-linear-gradient(top, #b8b8b8, #7a7a7a);
  background-image: -o-linear-gradient(top, #b8b8b8, #7a7a7a);
  background-image: linear-gradient(to bottom, #b8b8b8, #7a7a7a);
  text-decoration: none;
}
.cancel {
  display: none;
  background: #ff3333;
  background-image: -webkit-linear-gradient(top, #ff3333, #4a0000);
  background-image: -moz-linear-gradient(top, #ff3333, #4a0000);
  background-image: -ms-linear-gradient(top, #ff3333, #4a0000);
  background-image: -o-linear-gradient(top, #ff3333, #4a0000);
  background-image: linear-gradient(to bottom, #ff3333, #4a0000);
}
.cancel:hover {
  background-image: -webkit-linear-gradient(top, #1eff0a, #0e5200);
  background-image: -moz-linear-gradient(top, #1eff0a, #0e5200);
  background-image: -ms-linear-gradient(top, #1eff0a, #0e5200);
  background-image: -o-linear-gradient(top, #1eff0a, #0e5200);
  background-image: linear-gradient(to bottom, #1eff0a, #0e5200);
}

<table>
  <tr>
    <td>
      <button onclick="line_form_show()" id="line_opener">ADD LINE</button>
    </td>
    <td>
      <button onclick="high_form_show()" id="high_opener">HIGHLIGHT</button>
    </td>
    <td>
      <button onclick="weld_form_show()" id="weld_opener">ADD WELD</button>
      <button class="cancel" onclick="cancel_weld()" id="cancel_weld">CANCEL</button>
      <button class="cancel" onclick="cancel_pli()" id="cancel_pli">CANCEL</button>
      <button class="cancel" onclick="cancel_mtr()" id="cancel_mtr">CANCEL</button>
    </td>
    <td>
      <button onclick="mtr_form_show()" id="mtr_opener">ADD MTR</button>
    </td>
  </tr>
</table>
<script type="text/javascript">
  var buttons = [
    document.getElementById('go_back'),
    document.getElementById('line_opener'),
    document.getElementById('high_opener'),
    document.getElementById('weld_opener'),
    document.getElementById('mtr_opener'),
    document.getElementById('pli_opener'),
    document.getElementById('print'),
    document.getElementById('pliInfo')
  ];

  function weld_form_show() {
    //document.getElementById('weld_form').style.display="inline";
    document.getElementById('cancel_weld').style.display = "inline";
    buttons.style.display = "none";
  }

  function cancel_weld() {
    //document.getElementById('weld_form').style.display ="none";
    document.getElementById('cancel_weld').style.display = "none";
    buttons.style.display = "inline";
  }
</script>

Answer 1

几乎就在那里，但你需要迭代buttons之类的

function weld_form_show() {
  //document.getElementById('weld_form').style.display="inline";
  document.getElementById('cancel_weld').style.display = "inline";
  for(var i=0; i < buttons.length; i++){
     buttons[i].style.display = "none";
  }
}

function cancel_weld() {
    //document.getElementById('weld_form').style.display ="none";
    document.getElementById('cancel_weld').style.display = "none";
    for(var i=0; i < buttons.length; i++){
       buttons[i].style.display = "inline";
    }
}

这是因为buttons是包含具有style的元素的数组。因此，您必须逐个浏览它们才能更改它们

var buttons = [
  document.getElementById('go_back'),
  document.getElementById('line_opener'),
  document.getElementById('high_opener'),
  document.getElementById('weld_opener'),
  document.getElementById('mtr_opener'),
  document.getElementById('pli_opener'),
  document.getElementById('print'),
  document.getElementById('pliInfo')
];

function weld_form_show() {
  //document.getElementById('weld_form').style.display="inline";
  document.getElementById('cancel_weld').style.display = "inline";
  for(var i=0; i < buttons.length; i++){
     buttons[i].style.display = "none";
  }
}

function cancel_weld() {
    //document.getElementById('weld_form').style.display ="none";
    document.getElementById('cancel_weld').style.display = "none";
    for(var i=0; i < buttons.length; i++){
       buttons[i].style.display = "inline";
    }
}

button {

  border: none;

  display: inline;

  background: #f5f5f5;

  background-image: -webkit-linear-gradient(top, #f5f5f5, #d6d6d6);

  background-image: -moz-linear-gradient(top, #f5f5f5, #d6d6d6);

  background-image: -ms-linear-gradient(top, #f5f5f5, #d6d6d6);

  background-image: -o-linear-gradient(top, #f5f5f5, #d6d6d6);

  background-image: linear-gradient(to bottom, #f5f5f5, #d6d6d6);

  font-weight: bold;

  color: black;

  font-size: 10px;

  padding: 0px 10px 0px 10px;

  height: 25px;

  text-decoration: none;

  cursor: pointer;

}

button:hover {

  background: #b8b8b8;

  background-image: -webkit-linear-gradient(top, #b8b8b8, #7a7a7a);

  background-image: -moz-linear-gradient(top, #b8b8b8, #7a7a7a);

  background-image: -ms-linear-gradient(top, #b8b8b8, #7a7a7a);

  background-image: -o-linear-gradient(top, #b8b8b8, #7a7a7a);

  background-image: linear-gradient(to bottom, #b8b8b8, #7a7a7a);

  text-decoration: none;

}

.cancel {

  display: none;

  background: #ff3333;

  background-image: -webkit-linear-gradient(top, #ff3333, #4a0000);

  background-image: -moz-linear-gradient(top, #ff3333, #4a0000);

  background-image: -ms-linear-gradient(top, #ff3333, #4a0000);

  background-image: -o-linear-gradient(top, #ff3333, #4a0000);

  background-image: linear-gradient(to bottom, #ff3333, #4a0000);

}

.cancel:hover {

  background-image: -webkit-linear-gradient(top, #1eff0a, #0e5200);

  background-image: -moz-linear-gradient(top, #1eff0a, #0e5200);

  background-image: -ms-linear-gradient(top, #1eff0a, #0e5200);

  background-image: -o-linear-gradient(top, #1eff0a, #0e5200);

  background-image: linear-gradient(to bottom, #1eff0a, #0e5200);

}

<table>
  <tr>
    <td>
      <button onclick="line_form_show()" id="line_opener">ADD LINE</button>
    </td>
    <td>
      <button onclick="high_form_show()" id="high_opener">HIGHLIGHT</button>
    </td>
    <td>
      <button onclick="weld_form_show()" id="weld_opener">ADD WELD</button>
      <button class="cancel" onclick="cancel_weld()" id="cancel_weld">CANCEL</button>
      <button class="cancel" onclick="cancel_pli()" id="cancel_pli">CANCEL</button>
      <button class="cancel" onclick="cancel_mtr()" id="cancel_mtr">CANCEL</button>
    </td>
    <td>
      <button onclick="mtr_form_show()" id="mtr_opener">ADD MTR</button>
    </td>
  </tr>
</table>

Answer 2

你对此采取了一种非常具有说服力的方法，这本身并不坏，但不是javascript和DOM操作的工作方式：）

当您输入时，请参阅：

buttons.style.display = "none";

你的意思是＆＃34;每个按钮都应隐藏＆＃34; 。但是如何解释：＆＃34;按钮数组的样式属性的显示属性应该设置为无＆＃34; 。遗憾的是，数组首先没有样式属性，即使它们确实如此，设置数组的属性也就是 - 与数组相关联的东西，而不是数组的元素。 / p>

你很幸运，因为很多JS库，比如非常受欢迎的jQuery确实遵循你的声明直觉，并且理解为整个集合分配样式。在jQuery中，您可以编写以下内容：

buttonCollection.hide();

（或其他方式也达到相同的效果）也就是说，如果你使用jquery，那么buttonCollection的创建也需要基本上不同的语法。

JAVASCRIPT实际HTML元素的数组

2 个答案: