Question

以下Ajax代码需要发送两个数据，一个id（从data-id属性生成）和一个tweet（从textarea的值生成）。当页面上只有一个元素可以点击时，它可以很好地工作。

但是，我有一个列表页面调用相同的代码，页面上有几个相同类的元素。这些页面无法识别正在发送的“tweet”变量，并始终回退到默认值。如果我在下面的脚本中删除默认代码，则不会发送推文。

为什么以下不能使用带有“tweet”类的多个textareas中的一个？有什么想法吗？

$(document).on("click",".send-tweet-button", function() {
var id = $(this).attr('data-id');
var userAPI = ' /api/tweetSideTaken.json';
  var tweet = $('textarea.tweet').val();
  if (tweet == '') {
    tweet = "My default text";
}
  var userInfo = $.ajax({
    type: "POST",
    url: userAPI,
    dataType: "json",
    data: {
      tweet: tweet,
      tid: $(this).attr('data-id')
    }

  }).success(function(json) {
    //success stuff
  };
    if (error !='') {
    /error stuff
 }
  });
});

Answer 1

由于您查询类选择器，因此需要迭代每个元素以获取每个值。以下将为你工作

var tweet = '';
$('textarea.tweet').each(function(k,v){
    tweet += $(this).val();
});
if (tweet == '') {
    tweet = "My default text";
}

Answer 2

通常，当您从需要客户输入的元素获取数据并将其发布到服务器时，最佳做法是将属性“name”设置为具有不同名称的元素。 e.g。

<textarea class="tweet" name="tweet.title"></textarea>
<textarea class="tweet" name="tweet.content"></textarea>

var data = {};
$('textarea.tweet').each(function() {
    var $el = $(this);
    data[$el.attr('name')] = $el.val();
});

如果一个页面上的元素应用同一个类并且您碰巧通过此类查询它们，则$（selector）.val（）仅返回第一个元素的值。

Ajax：为同一类的多个项之一发送textarea的值

2 个答案: