0

有人可以看看这个吗

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

我的目标是单击“单击我”获取包含在“区域”div 中的文本以移动到下面的文本区域 - 每个空间中一个。

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

如果我能让这个工作，下一步是在“显示区域在不同的页面上时尝试实现同样的事情？？不确定这是否可能，我希望是吗？

4

4 回答 4

1

试试这个代码：

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

编辑：使用.text而不是.html因为我们不希望在 INPUT 字段内有任何标签。

于 2012-06-18T03:21:26.243 回答
1

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

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

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

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

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

于 2012-06-18T03:21:58.430 回答
0 
var $texts = $('textarea');
var $divs = $('div');

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

固定演示

笔记：

  • textarea，不是<input>你写的类型，它是一个标签：<textarea>
  • 我缓存了元素，所以我不需要多次查询 DOM。
于 2012-06-18T03:23:21.470 回答
0

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

<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;
});​

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

于 2012-06-18T03:33:33.193 回答