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

访问它们

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

创建自定义标签是否安全，例如＆＃34; prodcolor＆＃34;使用任何非保留的名称标签，还是有更聪明的方法来实现这一目标？

再次非常感谢。

Answer 1

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

由于您想要包含颜色，因此可以使用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>

某些背景：

关于如何使用JS访问这些属性，有nice guide published by Mozilla。请注意，建议使用短划线（-）分隔的属性，而不是任何其他命名约定，例如data-product-name代替data-productName。这是因为JS中的.dataset方法将破折号分隔的数据属性转换为camelCase。因此，data-product-name可以通过.dataset.productName访问，例如。

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

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

用法示例：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: