Question

我需要创建一个表单，用户可以从各种选项中选择一种颜色作为无线电输入。在选择他/她的选项2时，其他元素会添加或减少类别。

我设法使用与类名匹配的VALUE和ID。

值更改一个DIV，ID更改另一个。

它有效，但它似乎是一种非常黑客和不优雅的方式。如果我将来需要第三个元素怎么办？

这是我的jquery代码：

$('input:radio').click(function() {
    $('#preview').attr('class', 'obj').addClass(this.value)
    $('#ttc').attr('class', '.clr-span').addClass(this.id)
  });

Here is the jfiddle of it working

提前感谢您的时间，

Answer 1

在HTML5中，您可以向元素添加任意属性。所以你可以这样做：

$('input:radio').click(function() 
    let $this = $(this);
    $('#preview').attr('class', 'obj').addClass($this.data('a'))
    $('#ttc').attr('class', 'clr-span').addClass($this.data('b'))
  });

修改：fiddle

Edit2：请注意，使用.

时，.clr-span中不需要attr()

Answer 2

您可以使用HTML5自定义data-*属性来实现此目的。

在下面的示例中，我使用了：

data-preview-background-color
data-background-color
data-color

您可以通过带有连字符的名称来访问这些属性的值，如下所示：

element.dataset.previewBackgroundColor
element.dataset.backgroundColor
element.dataset.color

工作示例：

＆＃13;

var preview = document.getElementsByClassName('preview')[0];
var previewParagraph = preview.getElementsByTagName('p')[0]; 
var colourSelectors = document.querySelectorAll('[name="SelectColour"]');

function changeColours() {
    preview.style.backgroundColor = this.dataset.previewBackgroundColor;
    previewParagraph.style.backgroundColor = this.dataset.backgroundColor;
    previewParagraph.style.color = this.dataset.color;
}

for (var i = 0; i < colourSelectors.length; i++) {

    colourSelectors[i].addEventListener('change', changeColours, false);
}

＆＃13;

.preview {
text-align: center;
font-weight: bold;
margin-bottom: 24px;
}

.preview p {
height: 48px;
line-height: 48px;
margin: 24px 0;
}

.preview {
border: 1px solid rgb(127, 127, 127);
}

＆＃13;

<div class="preview">
<p>Change this text</p>
</div>

<form>

<label>
<input type="radio" name="SelectColour" data-preview-background-color="white" data-background-color="green" data-color="red">White
</label>

<label>
<input type="radio" name="SelectColour" data-preview-background-color="gray" data-background-color="black" data-color="white">Gray
</label>

<label>
<input type="radio" name="SelectColour" data-preview-background-color="red" data-background-color="pink" data-color="orangered">Cherry Red
</label>

</form>

＆＃13;

单击单选按钮更改2 <div>类的更好方法？

2 个答案: