Question

有人可以看看这个

http://jsfiddle.net/bloodygeese/EzkFR/1/

我的目标是点击＆＃34;点击我＆＃34;获取＆＃34;区域中包含的文字＆＃34; div移动到下面的文本区域 - 每个空间一个。

我已经删除了我在代码中失败的jquery尝试，因为我不知道自己在做什么。

如果我能让这个工作下一步，那么当＆＃34;显示区域在不同的页面上时，尝试实现同样的目的？不确定这是否可能，我希望是吗？

Answer 1

试试这段代码：

$("#submit").click
    (
        function()
        {
            $("#displayarea").val($("#area").text());
            $("#displayarea2").val($("#area2").text());
            $("#area").html("");            
            $("#area2").html("");
        }
        );

修改：使用.text代替.html，因为我们不希望INPUT字段中包含任何标记。

Answer 2

不确定是否要留下原始文本

演示：http://jsfiddle.net/EzkFR/6/

$('#submit').click(function(){
   $('#displayarea').val(  $('#area').text() ); 
   $('#displayarea2').val(  $('#area2').text() );   
})

注意没有input type="textarea"。它是input type="text"或<textarea></textarea>

如果您希望原始文本容器消失，请使用remove()

Answer 3

var $texts = $('textarea');
var $divs = $('div');

$('#submit').click(function() {
    $divs.each(function(index) {
        $texts.get(index).value = this.innerHTML;
        $(this).remove();
    });
});

Fixed DEMO

备注：

textarea，不是您写的<input>类型，它是一个标记：<textarea>

我缓存了元素，因此我不需要多次查询DOM。

Answer 4

假设你想要一种可扩展的方法来做到这一点......

<div id="area" class="movable">I wish I could go down there</div>
<div id="area2" class="movable">Me too please!!</div>
</br>
<input type="textarea" id="displayarea" class="inputtable" value="" />
<input type="textarea" id="displayarea2" class="inputtable" value="" />
</br>
<div id="submit">click me</div>
</br>

$('div#submit').click(function(e) {
    $('input.inputtable').each(function() {
        var input = $(this);
        $('div.movable').each(function() {
            var self = $(this);
            if (!self.hasClass('moved') && !input.hasClass('inputted')) {
                input.val(self.text()).addClass('inputted');
                self.addClass('moved');
            }
        });
        $('div.movable.moved').detach(); //safe to remove now that we're not looping through them.
    });
    e.preventDefault();
    return false;
});

工作小提琴：http://jsfiddle.net/EzkFR/10/

Jquery将div中的文本移动到表单输入字段

4 个答案: