我的元素中有一个自定义单选按钮。问题是这个按钮在 for 循环中的 Web 表单中不起作用。因为这些使用“for”属性来选择输入字段的唯一ID。但对于我的元素，我需要这些单选按钮在 foreach 循环中工作。我尝试过这样做，但找不到解决方案。javascript 中有某种方法可以做到这一点吗？
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,900);
* {
box-sizing: border-box;
}
@media (max-width: 40em) {
.button-wrap {
margin-top: -1.5em;
}
}
.button-label {
display: inline-block;
padding: 0.5em 1.5em;
margin: 0.5em;
cursor: pointer;
color: #292929;
border-radius: 0.25em;
background: #efefef;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.button-label h1 {
font-size: 1em;
font-family: "Lato", sans-serif;
margin-top:10px;
font-weight: 700;
}
.button-label:hover {
background: #d6d6d6;
color: #101010;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
}
.button-label:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
}
@media (max-width: 40em) {
.button-label {
padding: 0em 1em 3px;
margin: 0.25em;
}
}
#yes-button:checked + .button-label {
background: #2ECC71;
color: #efefef;
}
#yes-button:checked + .button-label:hover {
background: #29b765;
color: #e2e2e2;
}
#no-button:checked + .button-label {
background: #D91E18;
color: #efefef;
}
#no-button:checked + .button-label:hover {
background: #c21b15;
color: #e2e2e2;
}
.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<body>
<input class="hidden radio-label" type="radio" name="optradio" value="strongPositive" id="yes-button"/>
<label class="button-label" for="yes-button"><h1>option</h1></label>
<input class="hidden radio-label" name="optradio" value="meduimPositive" type="radio" id="no-button"/>
<label class="button-label" for="no-button"><h1>option2</h1></label>
</body>
</head>
</html>最佳答案
您不需要id s。如果你包装 <input>在 <label> ，<label>将自动关联到<input> .
<label><input type="radio" name="test" value="1"> Text 1</input></label>
<label><input type="radio" name="test" value="2"> Text 2</input></label>
- A
<label>can be associated with a control either by placing the control element inside the<label>element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.
如果您确实找到了绝对必须的理由id (也许还有其他 aria 属性)，我建议您创建一个静态索引变量，在实例化小部件的新实例时递增并分配该变量。这是我通常遵循的模式，也是 Dojo 的模式。如下。
关于javascript - 如何在 foreach 循环中使用 "for"属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49989521/