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

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

这是因为在textarea标签上注册的数据绑定。 data-bind =＆＃34;值：textContent＆＃34;

从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数组。

我该如何分开文本区域和单独编辑

2 个答案: