Question

$(document).ready(function() {
  $('textarea').val($('textarea').data('message'));
});

.testtextarea {
  outline: none;
  resize: none;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
  <h2>Test Page</h2>
  <textarea class="testtextarea" data-message="Hello World"></textarea>
  <textarea class="testtextarea" data-message="Test Text Area"></textarea>
  <textarea class="testtextarea" data-message="Hello Universe"></textarea>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>

此处的任何人都知道如何解决此问题？它显示的唯一data-message是第一个data-message。我在这里要做的是让它按textarea显示各自的数据信息。

由于

Answer 1

您可以为val()方法提供一个函数，该方法从每个文本区域读取data属性。试试这个：

$('textarea').val(function() {
    return $(this).data('message');
});

$(document).ready(function() {
  $('textarea').val(function() {
    return $(this).data('message');
  });
});

.testtextarea {
  outline: none;
  resize: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Test Page</h2>
<textarea class="testtextarea" data-message="Hello World"></textarea>
<textarea class="testtextarea" data-message="Test Text Area"></textarea>
<textarea class="testtextarea" data-message="Hello Universe"></textarea>

Answer 2

循环遍历所有textarea并使用$（this）

相应地设置值

＆＃13;

$( document ).ready(function() {
  $('textarea').each(function() {
    $(this).val($(this).data('message'));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<h2>Test Page</h2>
<textarea class="testtextarea" data-message="Hello World"></textarea>

<textarea class="testtextarea" data-message="Test Text Area"></textarea>

<textarea class="testtextarea" data-message="Hello Universe"></textarea>

＆＃13;

Answer 3

您必须在当前元素this上下文中设置文本。您需要迭代并设置值。可以使用.val(function)或.each()

$('textarea').val(function(_, val) {
   return $(this).data('message')
});

＆＃13;

$(document).ready(function() {
  $('textarea').val(function(_, val) {
    return $(this).data('message')
  });
});

＆＃13;

.testtextarea {
  outline: none;
  resize: none;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
  <h2>Test Page</h2>
  <textarea class="testtextarea" data-message="Hello World"></textarea>

  <textarea class="testtextarea" data-message="Test Text Area"></textarea>

  <textarea class="testtextarea" data-message="Hello Universe"></textarea>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


</html>

＆＃13;

Answer 4

$(document).ready(function(){
    $('.testtextarea').val(function () { return $(this).attr('data-message')});
});

在textarea中显示数据消息

4 个答案: