Question

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

如何根据您单击的按钮打开不同的模态？它应该获得产品NUMBER和NAME，并根据按钮（添加，移动，删除）在模式上打开不同的字段。

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>

MODAL DIV

<div id="Inventory" class="modal">
  <...>
    <div id="FIELD-TO-SHOW-TO-ADD-BUTTON">
      <label for="message-text" class="col-form-label">ADD</label>
      <input type="text" name="add">
    </div>             
    <div id="FIELD-TO-SHOW-TO-MOVE-BUTTON">
      <label for="message-text" class="col-form-label">MOVE</label>
      <input type="text" name="move">
    </div>   
    <div id="FIELD-TO-SHOW-TO-REMOVE-BUTTON">
      <label for="message-text" class="col-form-label">MOVE</label>
      <input type="text" name="move">
    </div>   
</div>

JS

$('#Inventory').on('show.bs.modal', function (event) {
if (action === "add") {
        $("div[id=add-inventory]").show();
        $("div[id=move-inventory]").hide();
        $("div[id=remove-inventory]").hide();
      } else if (action == "move") {
        $("div[id=add-inventory]").hide();
        $("div[id=move-inventory]").show();
        $("div[id=remove-inventory]").hide();
      } else if (action == "remove") {
        $("div[id=add-inventory]").hide();
        $("div[id=move-inventory]").hide();
        $("div[id=remove-inventory]").show();
};

但是我不知道JS如何捕获产品的数据ID，或者是否有更好的方法来做到这一点。提前致谢！对不起，这是我的第一篇文章，尽管我使用stackoverflow很长时间了！：）

编辑：我想我没有正确解释。我需要什么：

按钮A [data-tag =“ X”，data-tag2 =“ Y”，data-tag3 =“ Z”] 按钮B [data-tag =“ X”，data-tag2 =“ Y”，data-tag3 =“ Z”]

点击哪个按钮都没有关系，它将使用表单打开MODAL，但是我需要保持按下按钮中的数据，并将其作为字段插入，这样我才能从菜单中获取所有信息。按钮按下+模态中打开的表单中的所有信息。

编辑2 [已解决]：

每个显示的产品都有3个按钮。一个用于ADD，一个用于MOVE，另一个用于REMOVE。单击按钮后，将弹出一个带有表单的模式。提交后，负责打开模式的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均指打开模态所按下的按钮。

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

Answer 1

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

根据数据属性显示/隐藏：

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

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

有没有其他方法可以基于html5数据属性显示/隐藏字段？

1 个答案: