Question

我想知道如何使用与文本区域相同的ID向div添加文本。现在正在发生的事情是，每当我尝试输入它重复的文本时。我想要的只是当我输入文本时，我希望它能够根据div id或类显示。它重复的原因是因为我只有2个div来显示文本。

＆＃13;

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.textContent1 = ko.observable('');
  self.textContent2 = ko.observable('');
  self.textContent3 = ko.observable('');
  self.init = function() {
    self.items([]);
  }
  self.remove = function(item) {
    console.log(item);
    self.items.remove(item);
 }
 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('');
  }
}

ko.applyBindings(new vm());

＆＃13;

<div class="item1">
  <textarea id="fid1" data-bind="value: textContent1" Placeholder="Type text to append"></textarea>
</div>
<div class="item2">
  <textarea id="fid2" data-bind="value: textContent2" Placeholder="Type text to append"></textarea>
</div>
<div class="item3">
  <textarea id="fid3" data-bind="value: textContent3" 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="#" id="fid1" 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="#" id="fid2"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>
</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">

＆＃13;

使用相同的ID

0 个答案: