Есть ли другой способ показать / скрыть поля на основе атрибутов данных HTML5?

Question

Я использую модальный загрузчик, чтобы добавить контент к продуктам.Есть кнопка для открытия модального окна, которая отправляет некоторую информацию о продуктах через атрибуты данных html5 (data-product = "название продукта", data-product-id = "99" и т. Д.).

Какоткрыть разные модалы в зависимости от кнопки, на которую вы нажимаете?Он должен получить номер продукта и имя и, основываясь на кнопке (добавить, переместить, удалить), открыть различные поля на модальном.

HTML TABLE

<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 может узнать идентификатор продукта или есть ли лучший способ сделать это.Заранее спасибо!Извините, это мой самый первый пост, хотя я давно использую stackoverflow!:)

РЕДАКТИРОВАТЬ: Я думаю, что я не объяснил должным образом.Что мне нужно:

КНОПКА A [data-tag = "X", data-tag2 = "Y", data-tag3 = "Z"] КНОПКА B [data-tag = "X", data-tag2 = "Y", data-tag3 = "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();
}

Гдекаждый #amount 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

убедитесь, что вы указываете, какой вход вы хотите назначить.просто чтобы убедиться, что он не назначается никаким другим нежелательным входам