Question

单击按钮后，我必须将文本字段中的值插入数据库。这些文本字段是通过用户输入/单击生成的。因此，如果我分配一个ID或类，则所有元素都相同。即使我将其设置为唯一，也将如何获得与按钮单击相对应的文本字段的值。代码看起来像

 <% for(var i=0;i < post_data.length;i++){%>
 <div class="post-comment">
          <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
          <button class="btn btn-sm btnComment" id="<%= post_data[i].post_id %>" name="">
            <i class="fas fa-redo"></i>
          </button>
  </div>
  <%}%>

enter image description here

我的糟糕，我无法弄清楚。当我单击弯曲的箭头按钮时，我想要textarea中的值。

Answer 1

使用jquery方法如下：

$("button[name^=t]").click(function(){
     //process
}

每当单击名称以button开头的't'时，就会调用上述方法。

Answer 2

无需添加任何标识符，只需使用以下代码使用Jquery抓取上一个元素的数据即可。

  $(document).on('click','.btnComment',function(){
        var CommentText = $(this).prev().val(); 
        alert(CommentText);
    });

查看工作提琴here

Answer 3

这里没有jquery怎么做：

const buttons = document.querySelectorAll('.btn')
buttons.forEach(button => button.addEventListener('click', (event) => {
  // init listeners for buttons

  const value = event.target.parentNode // get to the textarea through the parent (div)
    .querySelector('textarea').value;
  console.log(value)
}))

<div class="post-comment">
  <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
  <button class="btn btn-sm btnComment" id="" name="">
            <i class="fas fa-redo"></i>1
          </button>
</div>
<div class="post-comment">
  <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
  <button class="btn btn-sm btnComment" id="" name="">
            <i class="fas fa-redo"></i>2
          </button>
</div>
<div class="post-comment">
  <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
  <button class="btn btn-sm btnComment" id="" name="">3
            <i class="fas fa-redo"></i>
          </button>
</div>

Answer 4

运行此代码段。您可以使用prev（）阅读文本。

$('.btn').on('click', function(){
	alert($( this ).prev().val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-comment">
          <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
          <button class="btn btn-sm btnComment" id="" name="">
            <i class="fas fa-redo"></i>1
          </button>
  </div>
 <div class="post-comment">
          <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
          <button class="btn btn-sm btnComment" id="" name="">
            <i class="fas fa-redo"></i>2
          </button>
  </div>
 <div class="post-comment">
          <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
          <button class="btn btn-sm btnComment" id="" name="">3
            <i class="fas fa-redo"></i>
          </button>
  </div>

如何获取for循环/ javascript生成的textarea的值

4 个答案: