javascript - 将文本的JavaScript变量也用作隐藏输入

我有一些JavaScript，可从网站的不同区域填充模式信息。基本上，如果单击展开模式的按钮，它将捕获与按下的按钮有关的所有数据。

这很完美，但是我需要使用当前用于填充类的文本元素，并将它们捕获为隐藏输入以传递给AJAX调用。

下面的JavaScript接受与单击的按钮关联的所有文本，并将其作为h3类传递。我的console.logs转储了我还需要作为隐藏输入的值。

我如何（在模式扩展时）将这些相同的元素捕获为隐藏输入并将它们传递给AJAX调用？

$('.expand-modalForDelete').click(function() {
  var row = $(this).parent()[0],
    allElementsInRow = $(row).find('div'),
    gName = allElementsInRow[0].outerText,
    gColor = allElementsInRow[1].outerText,
    gCategory = allElementsInRow[2].outerText;

  gComment = allElementsInRow[3].outerText;

  $('#gName').text(gName);
  $('#gColor').text(gColor);
  $('#gCategory').text(gCategory);
  $('#gComment').text(gComment);
  console.log(gName);
  console.log(gColor);
  console.log(gCategory);
  console.log(gComment);
  UIkit.modal("#modalForDelete").show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modalForDelete" class="uk-modal modalForDelete">
  <div class="uk-modal-dialog">
    <form id="editModal">
      <div class="uk-width-1-1">
        <div class="uk-width-1-1" style="margin-bottom:10px;">
          <div class="uk-grid">
            <h4 class="uk-width-4-10 uk-text-muted">Name</h4>
            <h3 id="gName" class="uk-width-4-10"></h3>
          </div>
        </div>
        <div class="uk-width-1-1" style="margin-bottom:10px;">
          <div class="uk-grid">
            <h4 class="uk-width-4-10 uk-text-muted">Color</h4>
            <h3 id="gColor" class="uk-width-4-10"></h3>
          </div>
        </div>
        <div class="uk-width-1-1" style="margin-bottom:10px;">
          <div class="uk-grid">
            <h4 class="uk-width-4-10 uk-text-muted">Category:</h4>
            <h3 id="gCategory" class="uk-width-4-10"></h3>
          </div>
        </div>
        <div class="uk-width-1-1" style="margin-bottom:10px;">
          <div class="uk-grid">
            <h4 class="uk-width-4-10 uk-text-muted">Comment:</h4>
            <h3 id="gComment" class="uk-width-4-10"></h3>
            <span class="edit-comment-icon uk-icon-pencil uk-width-2-10 uk-text-center" data-uk-tooltip="{cls:'edit-tooltip'}" title="Edit"></span>
            <button class="save-comment-button uk-button uk-button-success uk-width-2-10 uk-hidden">Save</button>
          </div>
        </div>
      </div>

      <div class="uk-modal-footer uk-text-center">
        <a id="delete-product-list-item" href="" class="uk-icon-button uk-icon-trash-o"></a>
      </div>
    </form>
  </div>
</div>

AJAX：

data: /* same as $('#gName').text(gName);
  $('#gColor').text(gColor);
  $('#gCategory').text(gCategory);
  $('#gComment').text(gComment);*/

最佳答案

如果我正确理解了您的问题，那么您只需要创建一个包含数据的对象，就像这样...

var ajaxData =  {
    color: gColor,
    category: gCategory,
    comment: gComment
};

然后将其作为数据对象传递给Ajax调用...

$.ajax({
    url: "your-url",
    data: ajaxData
});

关于颜色名称和数字是否在同一字符串中的问题，您可以像这样拆分它们...

var value = "112 - Brown";

// Split the string...  (use split("/") if it's a forward-slash)
val1 = val1.split(" - ");

var colorNum = val1[0];
var colorName = val1[1];