Взять 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];