JAVASCRIPT 个实际 HTML 个元素的数组
JAVASCRIPT array of actual HTML elements
我正在尝试将 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>
差不多了,但是你需要像
一样遍历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>
你对此采取了一种非常明确的方法,这本身并不坏,但不是 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 元素是否合法(或者我的语法是否正确)。
期望的结果是单击 "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>
差不多了,但是你需要像
一样遍历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>
你对此采取了一种非常明确的方法,这本身并不坏,但不是 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
的创建也需要基本不同的语法