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

首先paragraph内的button无效HTML。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意： -

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

如果您要在页面顶部添加脚本代码，那么它应该包含在$(document).ready(function(){..});内，但如果您要在页面底部添加脚本代码，则不需要（在两者中）案例jQuery库需要在代码之前添加）

有效的HTML示例如下所示： -

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

Answer 4

使用文字和背景

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

使用jQuery

4 个答案: