我如何分隔文本區域並分別編輯

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(){ $('.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

如果我正確理解您的問題是，只要您在第一文本區域中鍵入內容並模糊掉，那么第二和第三文本區域也會使用與第一文本相同的內容進行更新。

發生這種情況是由於在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數組。