10

我想知道是否有可能制作一个行为与单选按钮完全相同的 div？我试图在不使用很多人建议的 jquery 的情况下实现这一点，我检查了网络并找到了一些。

我以前这样做的方法是使用javascript，这适用于少数

function Switcher(a,b,c,d,e){
    document.getElementById('button1').style.background=a;
    document.getElementById('button2').style.background=b;
    document.getElementById('button3').style.background=c;
    document.getElementById('button4').style.background=d;
    document.getElementById('button5').style.background=e;
}

带有 onclick 事件

onClick="Switcher(#c5e043,#241009,#241009,#241009,#241009)"

然后切换每个单击的按钮，我可以添加一个检查单选按钮功能，但我注意到我可能需要最多 20 个，这使得列表非常长。

我想知道那里是否有人对这个问题有更简单的解决方案？基本上我需要一个 div，它的行为类似于一个单选按钮，可以在选择时更改 bgcolor 或 smthg（收音机也是如此）

4

3 回答 3

37

如果我理解，您确实想使用 div 而不是单选按钮来更好地控制外观。如果可以的话，我的建议是使用真正的单选按钮：

使用真正的单选按钮，后跟这样的标签：

<input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
<label class="radio" for="r1"></label>

使用 CSS，隐藏单选按钮：

.radios input[type=radio] {
    display:none
}

这样，您可以根据需要设置标签样式。我创建了一个简单的片段（和一个 jsfiddle），它充分展示了如何使用具有自定义外观的单选按钮。例如，我使用了一个小彩色框，当它被选中时会发生变化。

.radios .radio {
    background-color: #c5e043;
    display: inline-block;
    width: 10px;
    height: 10px;
    cursor: pointer;
}

.radios input[type=radio] {
    display: none;
}

.radios input[type=radio]:checked + .radio {
    background-color: #241009;
}
<div class="radios">
    <input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
    <label class="radio" for="r1"></label>
    
    <input type="radio" name="rGroup" value="2" id="r2" />
    <label class="radio" for="r2"></label>
    
    <input type="radio" name="rGroup" value="3" id="r3" />
    <label class="radio" for="r3"></label>
</div>

这是jsfiddle

于 2013-09-18T18:37:10.643 回答
3

摆脱那个 html onClick，使用内联 javascript 是不好的做法。在您包含在页面上的 javascript 文件中，添加此函数：

var checkboxes = document.querySelectorAll('.button');
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('click', function() {
        for (var j = 0; j < checkboxes.length; j++) {
            checkboxes[j].style.background = '#241009';
        }
        this.style.background = '#c5e043';
        return false;
    });
}

这是做什么的，它会获取你所有的按钮（你已经给你的所有按钮一个类button或类似的东西，对吧？）并为每个按钮分配一个click事件。该click事件会遍历您的所有按钮并将它们重置为#241009，然后将您单击的按钮 ( this) 设置为 #c5e043。

这样，您不必创建 20 个不同的onclick函数，并且可以在不改变结果的情况下添加或删除按钮。您可能还想创建一个数组来跟踪二十个按钮中的哪一个处于活动状态，或者您可以测试以查看哪种颜色处于活动状态（但最好设置一个数组）。

另外，我知道 Stack Overflow 讨厌这样，这正是 javascript 库使事情变得更容易的事情。一旦你对纯 javascript 有了很好的掌握，请查看像 jQuery 或其他库这样的库来简化这个过程。

于 2013-09-18T18:17:01.110 回答
0

要扩展 javascript 解决方案以处理许多“按钮”，请创建一个类。该类应该有一个包含 div 数组的字段。在该类中还提供了一个函数，例如 setDivState(isSelected)。在处理必须具有被单击的 div 的单击操作的方法中，对 div 执行 forEach 设置每个 div 的状态。

于 2013-09-18T18:03:22.637 回答