JAVASCRIPT 个实际 HTML 个元素的数组

Question

我正在尝试将 javascript 包含到从现场收集施工数据的表单应用程序中。我用谷歌搜索了这个废话，但我不知道在数组中保存 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";

你的意思是"every button should be hidden"。但是，如何解释它是这样的："the buttons array's style attribute's display attribute should be set to none"。可悲的是，数组首先没有样式属性，即使有，设置数组的属性也只是 - 与数组相关联的东西，而不是与数组元素相关联的东西。

虽然你很幸运，因为很多 JS 库，例如非常流行的 jQuery 确实遵循你的声明直觉，并且可以为整个集合分配样式。在jQuery中可以这样写：

buttonCollection.hide();

（或其他方法也能达到相同的效果）也就是说，如果您使用 jquery.

，那么 buttonCollection 的创建也需要基本不同的语法

JAVASCRIPT 个实际 HTML 个元素的数组

JAVASCRIPT array of actual HTML elements

javascript

html

arrays

displayobject