我遇到了一个问题，我需要更改 <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);
});
我所做的就是无论按哪个按钮都显示第一个文本。我真的需要一点帮助。
最佳答案
首先 button 中的 paragraph 是无效的 HTML。/p>
但在这种情况下，您也可以通过使用 $(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>关于javascript - 使用 jQuery 在单击按钮时在输入中插入 <p> 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45968349/