无法使用jquery从textarea获取文本

Question

我的jquery脚本有问题，由于某种原因，前两个按钮显示未定义而不是做下面的按钮。

谁能告诉我我做错了什么？ 我需要顶部的两个按钮作为下面的按钮。

HTML：

<table class="form-table">
<tbody>
<tr>
<th scope="row">Typ</th>
<td>
<button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button>
<button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button>
</td>
</tr>
<tr>
<th scope="row">Code HTML</th>
<td>
<button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button>
<button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button>
<div class="form">
<textarea name="code_g1" id="code_g1" placeholder="" rows="5" cols="50">https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png</textarea>
</div>
</td>
</tr>
</tbody>
</table>

JS：

$(function(){
  $(".IMGtoHTML").click(function() {
    var url = $(this).next().next('.form').find('textarea').val();
    var display_html = '<img src="'+url+'">';
    $(this).next().next('.form').find('textarea').val(display_html);
  });
});
$(function(){
  $(".FLASHtoHTML").click(function() {
    var url = $(this).next('.form').find('textarea').val();
    var display_html = '<img src="'+url+'">';
    $(this).next('.form').find('textarea').val(display_html);
  });
});

在这里演示： https ： //jsfiddle.net/hd4uao12/

Answer 1

你的点击处理程序不适用于前两个按钮，因为$(this).next().next('.form')将产生一个空的jQuery对象。 相反，我会用基于id的选择器替换找到textarea： $('#code_g1').val() 。

Answer 2

你的路径不正确。

from： var url = $（this）.next（）。next（'。form'）。find（'textarea'）。val（）;

to： var url = $（'＃code_g1'）。val（）;

 $(document).ready(function(){ $(function(){ $(".IMGtoHTML").click(function() { var url = $('#code_g1').val(); var display_html = '<img src="'+url+'">'; $('textarea').val(display_html); }); }); $(function(){ $(".FLASHtoHTML").click(function() { var url = $('#code_g1').val(); var display_html = '<img src="'+url+'">'; $('textarea').val(display_html); }); }); }); 

 textarea { width:350px; height:100px; } 

 <table class="form-table"> <tbody> <tr> <th scope="row">Typ</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> </td> </tr> <tr> <th scope="row">Code HTML</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> <div class="form"> <textarea name="code_g1" id="code_g1" placeholder="" rows="5" cols="50">https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png</textarea> </div> </td> </tr> </tbody> </table> 

Answer 3

你想要那样的东西吗？

 $(function(){ $(".IMGtoHTML").click(function() { var url = $(this).parents('.form-table').find('.form').find('textarea').val(); var display_html = '<img src="'+url+'">'; $('textarea').val(display_html); }); }); $(function(){ $(".FLASHtoHTML").click(function() { var url = $(this).parents('.form-table').find('.form').find('textarea').val(); var display_html = '<img src="'+url+'">'; $('textarea').val(display_html); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="form-table"> <tbody> <tr> <th scope="row">Typ</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> </td> </tr> <tr> <th scope="row">Code HTML</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> <div class="form"> <textarea name="code_g1" id="code_g1" placeholder="" rows="5" cols="50">https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png</textarea> </div> </td> </tr> </tbody> </table> 

Answer 4

根据你的html结构$（this）.next（）。next（'。form'）只适用于底部按钮。 使用$（'。form'）。find（'textarea'）。val（）

Answer 5

也许你想要做的是这样的：

 $(function(){ $(".IMGtoHTML").click(function() { var url = $('textarea').val(); var display_html = '<img src="'+url+'">'; $('textarea').text(display_html); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="form-table"> <tbody> <tr> <th scope="row">Typ</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> </td> </tr> <tr> <th scope="row">Code HTML</th> <td> <button class="IMGtoHTML" id="type_g1" name="type_g1" type="button">JPEG/PNG/GIF</button> <button class="FLASHtoHTML" id="type_g1" name="type_g1" type="button">Flash</button> <div class="form"> <textarea name="code_g1" id="code_g1" placeholder="" rows="5" cols="50">https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png</textarea> </div> </td> </tr> </tbody> </table> 

Answer 6

你只需要将“val（）”更改为“.text（）”

    $(function(){
  $(".IMGtoHTML").click(function() {
    var url = $(this).next().next('.form').find('textarea').text();
    var display_html = '<img src="'+url+'">';
    $(this).next().next('.form').find('textarea').val(display_html);
  });
});
$(function(){
  $(".FLASHtoHTML").click(function() {
    var url = $(this).next('.form').find('textarea').text();
    var display_html = '<img src="'+url+'">';
    $(this).next('.form').find('textarea').val(display_html);
  });
});

谢谢