如何分离文本区域并单独编辑

Question

我想分开文本区域问题是，当我在其中一个文本区域上写入文本时，它们都具有相同的文本，我想分别提交每个文本区域。我一直有很多的麻烦试图使这项工作，请帮助我，我也想单独编辑文本，如果我需要改变我的代码，我真的很感激它，只要它的作品

var z = 1; //value to make div overlappable 
 

 
$('#addText').click(function (e) { 
 
    /** Make div draggable **/ 
 
    $('<div />', { 
 
     class: 'ui-widget-content', 
 
     appendTo: '.container', 
 
     draggable: { 
 
      containment: 'parent', 
 
      start: function(event, ui) { 
 
       $(this).css('z-index', ++z); 
 
      } 
 
     } 
 
    }); 
 
}); 
 

 

 
$(document).on("dblclick", '.text', function() 
 
{ 
 
    $(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show(); 
 
}); 
 

 
$(document).on("click", ".edit_text", function() 
 
{ 
 
    return false; 
 
}); 
 

 

 
$(document).on("click", function() 
 
{ 
 
    var editingText = $('.edit_text:visible'); 
 
    if (editingText.length) 
 
    { 
 
     editingText.hide(); 
 
     editingText.closest('.item').find('.text').text($(editingText).val()).show(); 
 
    } 
 
}); 
 

 
ko.bindingHandlers.draggable={ 
 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
 
     $(element).draggable(); 
 
    } 
 
}; 
 

 
var vm=function(){ 
 
    var self=this; 
 
    self.items=ko.observableArray(); 
 
    self.textContent = ko.observable(''); 
 
    self.init=function(){ 
 
     self.items([]); 
 
    } 
 
    self.remove=function(item){ 
 
     console.log(item); 
 
     self.items.remove(item); 
 
    } 
 
    self.addNew = function() { 
 
     self.items.push(self.textContent()); 
 
     self.textContent(''); 
 
    } 
 
    self.init(); 
 
} 
 

 
ko.applyBindings(new vm()); 
 

 

 
$('.thumbs img').click(function() { 
 
    var thmb = this; 
 
    var src = this.src; 
 
    $(thmb).parent('.thumbs').prev('.bottlesWrapper').find('img').fadeOut(400,function(){ 
 
     thmb.src = this.src; 
 
     $(this).fadeIn(400)[0].src = src; 
 
    }); 
 
}); 
 

 

 

 

 

 

 

 

 
$("#fs").change(function() { 
 
    //alert($(this).val()); 
 
    $('.item3').css("font-family", $(this).val()); 
 

 
}); 
 

 
$("#size").change(function() { 
 
    $('.item2').css("font-size", $(this).val() + "px"); 
 
}); 
 

 

 
$('.foo').click(function(){ 
 
\t $('.item1').css("color", $(this).attr('data-color')); 
 
});

<select id="fs"> 
 
     <option value="Agency FB">Agency FB</option> 
 
     <option value="Algerian">Algerian</option> 
 
     <option value="AR Berkley">AR Berkley</option> 
 
     <option value="AR Blanca">AR Blanca</option> 
 
     <option value="AR Bonnie">AR Bonnie</option> 
 
     <option value="AR Carter">AR Carter</option> 
 
     <option value="AR Cena">AR Cena</option> 
 
     <option value="AR Christy">AR Christy</option> 
 
     <option value="AR Darling">AR Darling</option> 
 
     <option value="AR Decode">AR Decode</option> 
 
     <option value="AR Delaney">AR Delaney</option> 
 
     <option value="AR Destine">AR Destine</option> 
 
     <option value="AR Essence">AR Essence</option> 
 
     <option value="AR HERMANN">AR Hermann</option> 
 
     <option value="AR JULIAN">AR Julian</option> 
 
     <option value="Arial">Arial</option> 
 
     <option value="Arial Black">Arial Black</option> 
 
     <option value="Arial Narrow">Arial Narrow</option> 
 
     <option value="Arial Rounded MT Bold">Arial Rounded MT Bold</option> 
 
     <option value="Baskerville Old Face">Baskerville Old Face</option> 
 
     <option value="Bell MT">Bell MT</option> 
 
     <option value="Berlin Sans FB">Berlin Sans FB</option> 
 
     <option value="Berlin Sans FB Demi">Berlin Sans FB Demi</option> 
 
     <option value="Bernard MT Condensed">Bernard MT Condensed</option> 
 
     <option value="Blackadder ITC">Blackadder ITC</option> 
 
     <option value="Bodoni MT">Bodoni MT</option> 
 
     <option value="Bodoni MT Black">Bodoni MT Black</option> 
 
     <option value="Bodoni MT Condensed">Bodoni MT Condensed</option> 
 
     <option value="Bodoni MT Poster Compressed">Bodoni MT Poster Compressed</option> 
 
     <option value="Book Antiqua">Book Antiqua</option> 
 
     <option value="Bookman Old Style">Bookman Old Style</option> 
 
     <option value="Bradley Hand ITC">Bradley Hand ITC</option> 
 
     <option value="Britannic Bold">Britannic Bold</option> 
 
     <option value="Broadway">Broadway</option> 
 
     <option value="Brush Script MT">Brush Script MT</option> 
 
     <option value="Bodoni MT">Bodoni MT</option> 
 
     <option value="Californian FB">Californian FB</option> 
 
     <option value="Castellar">Castellar</option> 
 
     <option value="Century Gothic">Century Gothic</option> 
 
     <option value="Century Schoolbook">Century Schoolbook</option> 
 
     <option value="Chiller">Chiller</option> 
 
     <option value="Colonna MT">Colonna MT</option> 
 
     <option value="Comic Sans MS">Comic Sans MS</option> 
 
     <option value="Constantia">Constantia</option> 
 
     <option value="Cooper Black">Cooper Black</option> 
 
     <option value="Copperplate Gothic Bold">Copperplate Gothic Bold</option> 
 
     <option value="Copperplate Gothic Light">Copperplate Gothic Light</option> 
 
     <option value="Curlz MT">Curlz MT</option> 
 
     <option value="Edwardian Script ITC">Edwardian Script ITC</option> 
 
     <option value="Elephant">Elephant</option> 
 
     <option value="Engravers MT">Engravers MT</option> 
 
     <option value="Eras Bold ITC">Eras Bold ITC</option> 
 
     <option value="Eras Demi ITC">Eras Demi ITC</option> 
 
     <option value="Eras Light ITC">Eras Light ITC</option> 
 
     <option value="Eras Medium ITC">Eras Medium ITC</option> 
 
     <option value="Felix Titling">Felix Titling</option> 
 
     <option value="Footling MT Light">Footling MT Light</option> 
 
     <option value="Forte">Forte</option> 
 
    </select> 
 
<select id="size"> 
 
     <option value="8">8</option> 
 
     <option value="9">9</option> 
 
     <option value="10">10</option> 
 
     <option value="11">11</option> 
 
     <option value="12">12</option> 
 
     <option value="14">14</option> 
 
     <option value="16">16</option> 
 
     <option value="18">18</option> 
 
     <option value="20">20</option> 
 
     <option value="22">22</option> 
 
     <option value="24">24</option> 
 
     <option value="26">26</option> 
 
     <option value="28">28</option> 
 
     <option value="30">30</option> 
 
     <option value="32">32</option> 
 
     <option value="34">34</option> 
 
     <option value="36">36</option> 
 
     <option value="38">38</option> 
 
     <option value="40">40</option> 
 
     <option value="42">42</option> 
 
     <option value="44">44</option> 
 
     <option value="46">46</option> 
 
     <option value="48">48</option> 
 
     <option value="50">50</option> 
 
     
 
    </select><div class="item1"> 
 
<textarea data-bind="value: textContent" Placeholder="Type text to append"></textarea></div> 
 
<div class="item2"> 
 
<textarea data-bind="value: textContent" Placeholder="Type text to append"></textarea></div> 
 
<div class="item3"> 
 
<textarea data-bind="value: textContent" Placeholder="Type text to append"></textarea></div> 
 
<button data-bind="click: addNew">Generate New Div</button> 
 

 
<div class="container"> 
 
<div data-bind="foreach:items" class="fix_backround"> 
 
    <div href="#" class="item1" data-bind="draggable:true,droppable:true"> 
 
     <span data-bind="click:$parent.remove">[x]</span><br/><br/> 
 
     <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center> 
 
    </div> 
 
    <div href="#" class="item2" data-bind="draggable:true,droppable:true"> 
 
     <span data-bind="click:$parent.remove">[x]</span><br/><br/> 
 
     <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center> 
 
    </div> 
 
    <div href="#" class="item3" data-bind="draggable:true,droppable:true"> 
 
     <span data-bind="click:$parent.remove">[x]</span><br/><br/> 
 
     <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center> 
 
    </div> 
 
</div> 
 
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script 
 
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script><link rel="stylesheet" 
 
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
    <link rel="stylesheet" 
 
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 

 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<link rel="stylesheet" href="/resources/demos/style.css">

Answer 1

如果我理解正确，你的问题是，每当你在1st Textarea中输入一些东西并模糊出来，那么第二和第三个文本区域也会被更新为第一个相同的内容。

这是因为在textarea标签上注册的数据绑定而发生的。 data-bind =“value：textContent”

从textarea标签中删除此属性后，可以分别编辑3个textareas。

希望这可以帮助你。

Answer 2

如果我正确地理解了你，那么这个怎么样？

1.

<div class="container"> 
    <div data-bind="foreach:items" class="fix_backround"> 
    <div href="#" class="item1" data-bind="draggable:true,droppable:true"> 
     <span data-bind="click:$parent.remove">[x]</span> 
     <br/> 
     <br/> 
     <center> 
     <span class="text" data-bind="text:$data"></span><input class="edit_text"/> 
     </center> 
    </div> 
    </div> 
</div> 

你淘汰赛HTML是items阵列创建每个项目三个div的。我不认为这是你想要的。上面的代码在items阵列中每个项目只创建一个div。您添加的项目越多，您将获得的div越多。

2.

JS：

var vm=function(){ 
    var self=this; 
    self.items=ko.observableArray(); 
    self.textContent1 = ko.observable(''); 
    self.textContent2 = ko.observable(''); 
    self.textContent3 = ko.observable(''); 
    self.init=function(){ 
    self.items([]); 
    } 
// ... 

HTML：

<div class="item1"> 
    <textarea data-bind="value: textContent1" Placeholder="Type text to append"></textarea> 
</div> 
<div class="item2"> 
    <textarea data-bind="value: textContent2" Placeholder="Type text to append"></textarea> 
</div> 
<div class="item3"> 
    <textarea data-bind="value: textContent3" Placeholder="Type text to append"></textarea> 
</div> 

如果你想让他们独立行事您需要为您的文本输入框三个单独的数据绑定。

3.

self.addNew = function() { 
    var content = [ 
    self.textContent1(), 
    self.textContent2(), 
    self.textContent3() 
    ].filter(function(item) { 
    return item !== '' 
    }); 

    content.forEach(function(item) { self.items.push(item); }) 
    self.textContent1(''); 
    self.textContent2(''); 
    self.textContent3(''); 
} 

修改您addNew函数来获取所有的文本框的数据，筛选出那些没有内容，并追加那些内容到items阵列。