将输入的值附加到匹配的“名称”标签 div？

Question

目标：将添加到输入的值附加到具有匹配 name="" tag value 的 div。

问题：我证明的代码（如下）在只有一个 div 和一个输入，甚至两个 div 和一个输入时工作正常，但是当我添加第二个输入时，代码无法执行就像只有一个输入时一样。

$('.example-default-value').each(function() {
  var default_value = this.value;
  $(this).focus(function() {
    if (this.value == default_value) {
      this.value = '';
    }
  });
  $(this).blur(function() {
    if (this.value == '') {
      this.value = default_value;
    }
  });
});

function example_append() {

  if ($('.example-textarea').attr('name') === $('.example').attr('name')) {
    $('.example').append($('.example-textarea').val());
  }

};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example" name="add" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>

<div class="example" name="add1" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>

<form>
  <div><textarea class="example-default-value example-textarea" name="add1" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>

  <div><textarea class="example-default-value example-textarea" name="add" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>

  <div><input type="button" value="Append" onclick="example_append()" /></div>

</form>

Answer 1

您应该使用Attribute value Selector 定位所需的元素并获取它的值。

function example_append() {
  $('.example').append(function() {
    return $('.example-textarea[name=' + $(this).attr('name') + ']').val()
  });
}

function example_append() {
  $('.example').append(function() {
    return $('.example-textarea[name=' + $(this).attr('name') + ']').val()
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example" name="add" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>

<div class="example" name="add1" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>

<form>
  <div><textarea class="example-default-value example-textarea" name="add1" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>

  <div><textarea class="example-default-value example-textarea" name="add" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>

  <div><input type="button" value="Append" onclick="example_append()" /></div>

</form>

Answer 2

textareas不止一个，所以需要应用循环。

function example_append() {
  const divs = $('div');
  const inputs = $('.example-textarea');

  inputs.each(function() {
    const that = $(this);
    divs.each(function(i, div) {
      if ($(div).attr('name') == that.attr('name')) {
        $(div).text(that.val());
      }
    });

  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example" name="add" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>
<div class="example" name="add1" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>
<form>
  <div><textarea class="example-default-value example-textarea" name="add1" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>
  <div><textarea class="example-default-value example-textarea" name="add" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>
  <div><input type="button" value="Append" onclick="example_append()" /></div>
</form>

Answer 3

问题是您的textareas 没有唯一的名称，所以这段代码不起作用（找到多个元素）：

if ($('.example-textarea').attr('name') === $('.example').attr('name')){
    $('.example').append($('.example-textarea').val());
}

这是一个普通的 JS（即没有 JQuery）示例，您可以使用它来获得所需的结果：

<div id="add1"></div>
<div id="add"></div>

<textarea name="add1"></textarea>
<textarea name="add"></textarea>

<button>append</button>

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
    document.querySelectorAll('textarea')
  .forEach(t => {
    let name = t.getAttribute('name');
    let value = t.value;
    document.getElementById(name).innerHTML = value;
  });
});