自定义标记包含选项中的数据

Question

我有一个用户可以选择的东西列表.它目前的方式,我们有一个整数作为名称,价格作为值,但我需要添加一种颜色.它不是唯一的,所以我不能使用ID.

例如:

<option name='6' value="30.95">6 Orange(30.95$/month)</option>
<option name='6' value="33.95">6 Green(33.95$/month)</option>
<option name='10' value="32.95">10 Orange(32.95$/month)</option>
<option name='10' value="35.95">10 Green(35.95$/month)</option>

我需要结合两个非唯一值,并且可以通过jQuery/Javascript访问它们

我不想做两个选择.我知道这是最简单的解决方案,但如果我能坚持一个可以提供更好结果的单一解决方案.

使用任何非保留名称标签创建像"prodcolor"这样的自定义标签是否安全,还是有更聪明的方法来实现这一目标？

非常感谢再次.

Answer 1

您可以使用HTML5 data-属性,这是为此目的而发明的.更重要的data-是,可以使用JS访问属性的值.

由于您想要包含颜色,因此可以使用该data-colour属性,例如:

<option name='6' value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
<option name='6' value="33.95" data-colour="green">6 Green(33.95$/month)</option>
<option name='10' value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
<option name='10' value="35.95" data-colour="green">10 Green(35.95$/month)</option>

更好的是:实际上,您甚至不应该使用该name属性来存储您的数量.为什么data-quantity不用呢？:)

<option data-quantity="6" value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
<option data-quantity="6" value="33.95" data-colour="green">6 Green(33.95$/month)</option>
<option data-quantity="10" value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
<option data-quantity="10" value="35.95" data-colour="green">10 Green(35.95$/month)</option>

一些背景:

Mozilla发布了一个很好的指南,介绍如何使用JS访问这些属性.请注意,建议使用dash(-)分隔的属性,而不是任何其他命名约定,例如,data-product-name而不是data-productName.这是因为.datasetJS中的方法将破折号分隔的数据属性转换为camelCase.因此,data-product-name将通过访问.dataset.productName,例如.

jQuery还允许您data-通过.attr()或.data()方法访问属性的值.唯一的区别是:

• .attr()没有缓存,因此您可以使用它来访问动态修改的data-属性,而.data只在运行时读取数据属性.
• .attr()可用于读取和写入数据属性,但.data()只能用于从DOM读取数据属性..data()还用于访问未写入DOM的jQuery数据对象.

用法示例:

使用上面的代码,我们可以创建一个简单的示例,在change事件触发时警告产品的颜色:

$(function() {
  $('select').change(function() {
    var $choice = $(this).find('option:selected')
    alert('Colour: ' + $choice.attr('data-colour') + '\n' + 'Price: $' + $choice.val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option name='6' value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
  <option name='6' value="33.95" data-colour="green">6 Green(33.95$/month)</option>
  <option name='10' value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
  <option name='10' value="35.95" data-colour="green">10 Green(35.95$/month)</option>
</select>