javascript - 将函数变量发送到外部ajax调用

Question

我有一个模态，其中包含带有图标的文本元素

<span class="edit-comment-icon" title="Edit"></span>

当点击图标时，它会将 h3 变成文本区域:

$('.edit-comment-icon').click(function(){
var _this = $(this),
    h3Tag =_this.prev()[0],
    h3Value = productComment;

    var input = $('<textarea />', {
        val: h3Value, 
        type: "text", 
        class:'uk-width-4-10',
        style: 'padding: 5px',
        rows: '5'
        });

    h3Tag.replaceWith(input[0]);
    $('.edit-comment-icon').hide();
    $('.save-comment-button').removeClass('uk-hidden').css('font-size','20px');
})

问题是我有一个外部 ajax 调用，它使用另一组数据进行提交，但我需要将点击提交时此文本区域中的值添加到该数据中。

因此，如果 header 显示“TEST”并且他们进行编辑，并将其更改为文本区域中的“testing”并点击保存/提交，我需要将“testing”及其接收的当前数据传递给我的ajax调用:

$('#saveButton').click(function(){
    $ajax({
      url: 'url',
      data: dataset /*but need to add textarea value to this*/
    });
})

如何添加来自此其他函数的 textarea 值，以便在外部 ajax 调用中发送它？

Answer 1

只需使用一个针对模态元素内的 textarea 元素的选择器，例如，如果您的模态元素具有 my-modal 类，则可以使用 .my-modal textarea

$('#saveButton').click(function(){
    var value = $('.my-modal textarea').val();
    var dataset = {
      myTextarea:value
      //and/or other properties
    };    
    //or if dataset is already created
    dataset.myTextarea = value;

    $ajax({
      url: 'url',
      data: dataset
    });
})

如果模态中有多个文本区域，您需要向该文本区域添加一个 id 或一些唯一的类

var input = $('<textarea />', {
  val: h3Value, 
  type: "text", 
  class:'for-h3 uk-width-4-10',
  style: 'padding: 5px',
  rows: '5'
});

然后在回调中

var value = $('.my-modal .for-h3').val();