javascript - JQuery - 追加到已使用 Jquery 修改的文本区域

Question

我正在尝试将 div 或输入框的值 append 到我的文本区域。我有这个工作没有问题，但如果我首先使用 Jquery 操作清除文本区域的内容，它不允许我使用我的追加功能。

例如

<script type="text/javascript">
$(document).ready(function() {
   $("#Column1").click(function () {
        $("#sql").append($("#Column1").val())
   })

    $("#Column2").click(function () {
        $("#sql").append($("#Column2").html())
   })

  $("#reset_sql").click(function () {
        $("#sql").val('SELECT ')
   })
</script>


<div> <input type="checkbox" name="column1" id="column1" value="`Column1`"> column1 </div>
<div id="Column2"> Column2 </div>

<textarea rows="10" cols="80" name="sql" id="sql"><? echo $sql ;?></textarea>
<input type="submit" value="submit" />
<input type="button" value="reset sql" id="reset_sql" />

上面的 input 和 div 行只是一般示例，但与我正在尝试做的事情完全相关。

我不明白，当我用 javascript 清除文本区域时，我的追加将不起作用。我在 firefox 错误控制台中没有收到任何 JS 错误。

谢谢

Answer 1

您的代码有几个问题:您没有关闭 document.ready 回调，在引用您的 ID 时使用了错误的大小写，以及您错误地使用了一些 jQuery 方法。例如，append() 将 HTML append 到元素，而您想要更新值。

您的逻辑也不完全正确，因为当您取消选中复选框时不会删除列，并且列不会以逗号分隔(看起来您正在此处构建 SQL 字符串)。

我相信您正在寻找这样的东西:

$(document).ready(function() {
    var $sql = $('#sql');
    var initialValue = $sql.val();

   $("#column1, #column2").on('change', function () {
       var cols = [];

       var checked = $('input[type="checkbox"]').filter(':checked').each(function() {
           cols.push($(this).val());
       });

       $sql.val(initialValue + ' ' + cols.join(', '));
   })

   $("#reset_sql").on('click', function () {
        $sql.val(initialValue)
   })
});

Working Demo