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

custom tag containing data in option

本文关键字：自定义 数据 包含 选项      更新时间：2023-09-26

我有一个用户可以选择的东西列表。按照目前的制作方式，我们有一个整数作为名称，一个价格作为值，但我需要添加一种颜色。它不是唯一的，所以我不能使用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"这样的自定义标签安全吗？或者有更聪明的方法来实现这一点吗？

再次感谢。

您可以使用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>

一些背景：

Mozilla发布了一个很好的指南，介绍如何使用JS访问这些属性。请注意，建议使用破折号（-）分隔的属性，而不是任何其他命名约定，例如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事件时提醒产品的颜色：

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

相关文章：