获取文本的 JavaScript 变量并将它们用作隐藏输入

Question

我有一些 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);*/

Answer 1

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

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];