Question

我想在点击textarea旁边的按钮后从textarea获取文本。

问题是我会有很多textareas，每个按钮都必须返回与之对应的textarea的文本。

这是我的代码

function btnmodif(){

	var mod = $(this).prev().val();
	
	alert(mod);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div class="list-item-edit">
   <textarea class="list_input">eggs</textarea>				
    <button class="btn btn-modify-item" onClick="btnmodif()">get text</button>
 				
 			</div>

<div class="list-item-edit">
   <textarea class="list_input">water</textarea>				
    <button class="btn btn-modify-item" onClick="btnmodif()">get text</button>
 				
 			</div>

Answer 1

您必须通过object点击btnmodif功能。

<button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button>

JS

function btnmodif(button){
    var mod = $(button).prev().val();
    alert(mod);
};

此外，您应该使用.prev功能。

详细了解.prev()函数here。

function btnmodif(button){
	var mod = $(button).prev().val();
	alert(mod);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div class="list-item-edit">
   <textarea class="list_input">eggs</textarea>				
    <button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button>
 				
</div>

<div class="list-item-edit">
   <textarea class="list_input">water</textarea>				
    <button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button>
 				
</div>

Answer 2

首先，您需要将单击的元素作为上下文传递给函数：

onClick="btnmodif(this)"

...

function btnmodif(button){

其次，如果HTML结构保持不变（即textarea始终是紧接按钮之前的元素），那么您可以使用prev()

var mod = $(button).prev('textarea').val();

https://api.jquery.com/prev/

如果不保证维护该结构，那么.siblings()会为您提供更多灵活性，因为它会搜索DOM中同一层次级别的所有元素，以找到您想要的内容：

var mod = $(button).siblings('textarea').val();

https://api.jquery.com/siblings/

Answer 3

这是你在寻找什么。

将this作为参数添加到button.onclick

感谢jQuery：

使用$(element).parent()，您将获得div元素。
使用$(element).parent().find('.list_input')，您将获得textarea元素。
使用$(element).parent().find('.list_input').text()为您提供与＆＃34;相关的textarea＆＃34;的值点击按钮。

＆＃13;

function btnmodif(element){
    var result = $(element).parent().find('.list_input').text();
    alert(result);
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div class="list-item-edit">
   <textarea class="list_input">eggs</textarea>				
    <button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button>
 				
 			</div>

<div class="list-item-edit">
   <textarea class="list_input">water</textarea>				
    <button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button>
 				
 			</div>

＆＃13;

Answer 4

您错过了内联处理程序规范中的this：

https://jsfiddle.net/3mvod6ux/

使用带有选择器的siblings来获取属于该按钮的同一块的textarea值。

function btnmodif(button){
    var mod = $(button).siblings("textarea").val();
    alert(mod);
};

Answer 5

完成此任务的另一种方法。相反，使用HTML事件属性这是更好的方法。

var btnModifyItem = $('.btn-modify-item');

btnModifyItem.click(function(){
    var mod = $(this).prev().val();
    alert(mod);
})

Answer 6

这样您就可以获得button（和textarea）的父级，然后可以从子textarea获取文字：

$('button').on('click', function () {
            console.log(($(this).parent().find("textarea").text()));
        });

如何获得prev textarea元素

6 个答案: