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的选择器代替查找文本区域：$('#code_g1').val()。

Answer 2

您的路径不正确。

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

收件人： 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);
  });
});

谢谢

无法使用jQuery从Textarea获取文本

6 个答案: