Question

我有一个网页，用户可以在其中选择要从列表中购买的一种不同包装。软件包详细信息来自数据库。

HTML代码

<div data-package='2346343' class="retail-package">Cost : 10$</div> 
<div data-package='5465654' class="retail-package">Cost : 20$</div> 
<div data-package='3455675' class="retail-package">Cost : 30$</div>

jQuery代码

$('.retail-package').on('click', function() {
   $(this).addClass("selected-package");
   var selectedPackage = $(this).data("package");
});

现在，上面的代码显示了我们（特别是i）通常如何在单击时从列表中选择特定内容。在此过程中，正如您在HTML代码中所看到的，我正在向{{1}用户，即任何人都可以在浏览器中执行检查元素，并查看甚至操纵pakcageId属性，出于安全性考虑，我对所选数据进行服务器端检查。

我的问题

有没有隐藏此数据公开的方法，或者有没有其他更清洁的方法来完成此操作，因为我看到人们使用data-package，Angular等能够实现{{1} }，而不会给出或显示浏览器中的检阅元素功能可以看到的任何数据。

注意：很抱歉，如果我的问题太基本了，如果无法使用jquery完成此操作，我还可以使用哪些其他技术？

Answer 1

您可以创建一个Map，其中键是任意的，自动递增的标识符，而 values 是包装号：< / p>

const idPackageMap = new Map()

// id generator: whenever you call it, "i" is incremented and returned
const id = (() => {
  let i = 0

  return () => ++i
})()

const addPackage = package =>
  idPackageMap.set(id(), package)

addPackage(2346343)
addPackage(5465654)
addPackage(3455675)

console.log('contents: ', [...idPackageMap.entries()])
console.log('package number for id 2: ', idPackageMap.get(2))

现在，当您插入这些<div>元素时，可以设置任意标识符，而当您需要查找实际的包装编号时，就可以使用Map#get：idPackageMap.get(1)（将1更改为任意标识符）。

jQuery中数据属性的替代方法

1 个答案: