-1

我想让用户双击我网页上的 li 元素，然后将 li 的文本添加到下面的文本区域。

用户可以双击多个 li 项目。每次发生这种情况时，新项目都会附加到 textarea 中列表的后面。

我在 textarea 中有一些默认文本：“在手风琴中双击电影名称以插入。”

因此，下面的 HTML 代码：

<!-- there is a list before this which I have not included -->

<div id="chosen">

<form action="process.php?stage=4" method="post">

<textarea name="g" row="5">Double click on movie name in list above to insert.</textarea>

<input type="submit" />


</form>

</div>

和jQuery：

$(document).ready (function(){
$('li').bind('dblclick', function(){ //#accordion 

    var text = $(this).html() + "; ";
    $("textarea").append(text);

    });

});

该代码在正常情况下绝对有效，但是当我单击文本区域以修改其内容时停止工作。为什么会这样？即使我触摸了 textarea 的内容，有没有办法让代码工作？

(2) 另一方面，为什么下面的代码不起作用？我在发现 append() 方法之前尝试了这个。它与 $(this) 范围有关吗？

$(document).ready (function(){
$('li').bind('dblclick', function(){ //#accordion 

    var text = $(this).html() + "; ";
    $("textarea").html( function() { //.chosen 

       var currenthtml = $(this).html(); // retrieve the current HTML first 
       currenthtml += text;
        return currenthtml;      });

    });

});

(3) 另外，如果用户已经双击一个 li 元素以将其包含到 textarea 中，我该如何编程允许撤消该包含的功能？有没有一种方法可以让我做与 append() 相反的操作？

4

3 回答 3

2

只是你问题的答案2）

html() 函数用于获取或插入文本到 HTML 标签中（例如：）<div></div>；textarea 的内容不是 html。等效的是：

  $("textarea").val("Hello World!");

对于您的第一个问题，我做了一个小提琴： http: //jsfiddle.net/nhKwQ/，即使我点击文本区域，它也能完美运行（在 Chrome 26 中测试）。您可以尝试将您的行为重现到小提琴中吗？

好的，您在编辑时是对的，它不再起作用了...

编辑：：它适用于 val() 函数：

$(document).ready(function () {
    $('li').bind('dblclick', function () { //#accordion 

        var text = $(this).html() + "; ";
        $("textarea").val($("textarea").val() + text);

    });

});

http://jsfiddle.net/nhKwQ/1/

于 2013-05-02T11:49:27.450 回答
1

作为问题#1的答案：

尝试按以下方式设置值，而不是 append 方法。

$("[name=g]").val(text);

由于某种原因，它似乎失去了对 textarea 元素的关注。

使用 [name=g] 它将查找具有该特定名称的元素并分配一个值。

您还可以使用以下内容更具体：

$("textarea[name=g]").val(text);

这也应该解决您的问题 #3。

于 2013-05-02T11:54:38.170 回答
0

对于你的第二个问题

var text = $(this).html()

在这一行中this指向 `li 元素但在

var currenthtml = $(this).html();

this是textarea元素而不是li元素

对于你的第三个问题。您将不得不手动将 textarea 的值恢复到以前的状态（使用.append()）没有撤消功能

于 2013-05-02T12:19:43.687 回答