插入 <p> 使用jQuery单击按钮时输入中的元素

Question

我遇到了需要更改<button></button>内的HTML的问题。 以下是HTML的相关行：

<input class="form-control" type="text" id="subject" />
<button type="button" class="btn" id="btv"><p>Text 1</p></button>
<button type="button" class="btn" id="btc"><p>Text 2</p></button>

这就是jQuery：

$('.btn').click(function(){
    var text = $('.btn p').html();
    $('#subject').val(text);
});

我所要做的就是无论我按哪个按钮，都显示第一个文本。 我真的需要一些帮助。

Answer 1

首先，在无效HTML button内的paragraph 。

但是在这种情况下，您也可以通过使用$(this)和.children()来使代码工作，如下所示：-

 $(document).ready(function(){ $('.btn').click(function(){ $('#subject').val($(this).children('p').text()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="form-control" type="text" id="subject" /> <button type="button" class="btn" id="btv"><p>Text 1</p></button> <button type="button" class="btn" id="btc"><p>Text 2</p></button> 

注意：-

确保在脚本代码之前添加了jQuery库。

如果要在页面顶部添加脚本代码，则应将其包装在$(document).ready(function(){..}); ，但是如果您要在页面底部添加脚本代码，则没有必要（在两种情况下都需要在代码之前添加jQuery库）

一个有效的HTML示例如下：

 $('.btn').click(function(){ $('#subject').val($(this).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <input class="form-control" type="text" id="subject" /> <button type="button" class="btn" id="btv">Text 1</button> <button type="button" class="btn" id="btc">Text 2</button> </body> 

Answer 2

 $('.btn').click(function(){ var text = $(this).html(); $('#subject').val(text); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <input class="form-control" type="text" id="subject" /> <button type="button" class="btn" id="btv">Text 1</button> <button type="button" class="btn" id="btc">Text 2</button> </body> 

Answer 3

$('#subject').val( $(this).text() )

Answer 4

使用文字和上下文

$('.btn').click(function(){
    $('#subject').val($(this).text());
});