Javascript 是否有另一种基于html5数据属性显示/隐藏字段的方法？

我正在使用引导模式为产品添加一些内容。有一个按钮可以打开一个模式，它通过html5数据属性（data product=“product name”、data product id=“99”等）发送一些产品信息

如何根据您单击的按钮打开不同的模态？它应该获得产品编号和名称，并根据按钮（添加、移动、删除）在modal上打开不同的字段

HTML表格

<tr id="1">
  <td>Product A NUMBER</td>
  <td>Product A NAME</td>
  <td><a data-id="add" type="button" data-target="#Inventory" data-toggle="modal">Add</a></td>
  <td><a data-id="move" type="button" data-target="#Inventory" data-toggle="modal">Move</a></td>
  <td><a data-id="add" type="button" data-target="#Inventory" data-toggle="modal">Remove</a></td>
</tr>
<tr id="2">
  <td>Product B NUMBER</td>
  <td>Product B NAME</td>
  <td><a data-id="add" type="button" data-target="#Inventory" data-toggle="modal">Add</a></td>
  <td><a data-id="move" type="button" data-target="#Inventory" data-toggle="modal">Move</a></td>
  <td><a data-id="add" type="button" data-target="#Inventory" data-toggle="modal">Remove</a></td>
</tr>

但我不知道JS如何捕获产品的数据id，或者是否有更好的方法。提前谢谢！很抱歉，这是我的第一篇帖子，虽然我使用stackoverflow已经很久了！：）

编辑： 我想我没有解释清楚。我需要的是：

按钮A[data tag=“X”，data-tag2=“Y”，data-tag3=“Z”] 按钮B[数据标签=“X”，数据标签2=“Y”，数据标签3=“Z”]

无论我点击哪个按钮，它都会打开一个带有表单的模式，但我需要保持按钮上的数据被按下，作为一个字段插入，这样我就可以从按下的按钮中获取所有信息+从模式上打开的表单中获取所有信息

编辑2[已解决]：

我有3个按钮，每个产品显示。一个用于添加，一个用于移动，另一个用于删除。单击按钮后，将弹出一个带有表单的模式。一旦你提交了它，负责打开模态的JS就应该从这个表单中获取数据，但是它没有得到，直到我找到了添加类似以下内容的解决方案：

if (action === "add") {
  product_amount = modal.find('#amount1').val();
} else if (action == "move") {
  product_amount = modal.find('#amount2').val();
  userToMove = modal.find('#userToMove').val();
} else if (action == "remove") {
  product_amount = modal.find('#amount3').val();
}

其中，每个#金额ID指的是按下按钮打开模式

---

非常感谢所有帮助过我的人，很抱歉，由于语言[英语]的限制，我无法正确解释这个问题。谢谢！：）

我不知道这是否是您需要的，但我需要解释的不仅仅是一句评论：

要基于数据属性显示/隐藏，请执行以下操作：

$('div[data-product="product name"]').show();
$('div[data-product="product name"]').hide();

要获取div的数据属性，请执行以下操作：

$(".someClass").data('product'); 

要获取您喜欢的任何属性，请执行以下操作：

$(".someClass").attr('something-product');

更新您的评论：

var tag = $(".someClass").data("tag1"); //data-tag1 value of the button
$('input').attr("data-tag1",tag); //set input's data-tag1 to buttons data-tag1

---

确保指定要将其分配到的输入。只是为了确保它不会分配给任何其他不需要的输入

div[id=add inventory]

尽管与您的实际问题相关：解释了如何执行此操作。@Taplar，我是根据该页面编写代码的。但它不携带用于启动模式的按钮的其他变量。这就是我的问题所在。：）谢谢事实上，我不知道如何用不同的方式来做。对于像我这样愚蠢的程序员来说，这是一种变通方法：）id选择器是

#添加库存
谢谢你的代码。我想我没有解释清楚。我需要的是：按钮A[data tag=“X”，data-tag2=“Y”，data-tag3=“Z”]按钮B[data tag=“X”，data-tag2=“Y”，data-tag3=“Z”]无论我点击哪个按钮，它都会打开一个带有表单的模式，但我需要保留按钮中的数据，作为，因此，我可以从按下的按钮中获取所有信息+在modal上打开的from中的所有信息。@teco我更新了答案，希望能帮助您根据需要修改答案。首先你得到data-tag1值，然后把它分配给你想要的任何输入。我只是想再次阅读我的信息，但我真的不明白我解释的方式。它变得非常混乱。感谢您的关注和代码。在我陷入这个问题之前，我已经做了这一步。最后我找到了一个解决方案：我能够打开modal，但是JS没有从按下的按钮中获得正确的数据。因此，我必须创建一个语句，如果按下按钮A，则获取特定表单的值。如果将来有人有这个问题，我会更新代码。再一次，谢谢！
$(".someClass").attr('something-product');

var tag = $(".someClass").data("tag1"); //data-tag1 value of the button
$('input').attr("data-tag1",tag); //set input's data-tag1 to buttons data-tag1