2 контейнера отменить друг друга

Question

Я хотел бы знать, как я могу предотвратить удаление двух контейнеров. коды почти одинаковы, я только что изменил несколько вещей, которые я не делаю, но один из них не работает, если я переключил их вокруг того, на который я положил первые работы, но не второй. Я использую toggle для отображения по одному. Я просто отправлю небольшую часть своего кода.

JavaScript для первой части

<script> 
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(); 
} 
}); 


var count = 1; 
var selectedDraggable; 

ko.bindingHandlers.draggable={ 
init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
    $(element).draggable(); 
    $(element).addClass('item' + count); 
    count++; 
    $(element).on('click', function() { 
     selectedDraggable = $(this); 
    }) 
} 
}; 


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()); 

JavaScript для второй части

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

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


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

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


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


var count = 1; 
var selectedDraggable; 

ko.bindingHandlers.draggable={ 
init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
    $(element).draggable(); 
    $(element).addClass('item1' + count); 
    count++; 
    $(element).on('click', function() { 
     selectedDraggable = $(this); 
    }) 
} 
}; 


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

ko.applyBindings(new vm()); 

тумблер

$("#show_first").click(function(){ 
$(".firstdiv").toggle(); 
$(".seconddiv").hide(); 
}); 

$("#show_second").click(function(){ 
$(".secoddiv").toggle(); 
$(".firstdiv").hide(); 
}); 

HTML для переключения

<button type="button" id="show_first">Display Front</button> 
<button type="button" id="show_second">Display Back</button> 

HTML для контейнера и ввода текста (первый)

<div class="firstdiv"><center>Front</center> 
<div class="container1" style=" float: left;" > 
<p align="center"><textarea data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>&nbsp;&nbsp;&nbsp; 
    <button type="button" data-bind="click: addNew">Create</button></p> 
<div id="box" class="container" style="float:left;"> 

<div data-bind="foreach:items" class="fix_backround"> 
<div class="item" data-bind="draggable:true,droppable:true"> 

    <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center></div></div></div></div></div> 

HTML для контейнера и ввода текста (второй)

<div class="seconddiv"><center>second</center> 
<div class="container3" style=" float: left;" > 
<p align="center"><textarea data-bind="value: textContent1" Placeholder="Type text to append" rows="4" cols="21"></textarea>&nbsp;&nbsp;&nbsp; 
    <button type="button" data-bind="click: addNew1">Create</button></p></div> 

<div id="box1" class="container4" style="float:left;"> 

    <div data-bind="foreach:items1" class="fix_backround1"> 
    <div class="item1" data-bind="draggable:true,droppable:true"> 

    <center><span class="text1" data-bind="text:$data"></span><input class="edit_text1"/></center></div></div></div></div></div> 

Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-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> 

<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script> 

Answer 1

Вы включаете jQuery, Knockout и jQuery-UI каждый раз дважды. Это, вероятно, не проблема, но это не хорошо.

Вы используете jQuery для управления отображением блоков, и это нокаут no-no. Задача нокаута - манипулировать DOM. Посмотрите на Knockout templates, или на if binding, чтобы узнать, как управлять отображением.

Answer 2

Похоже, у вас есть опечатка в ваш переключатель js для класса seconddiv. Вам не хватает «n» в вашем вызове jquery для него: secoddiv. Если этот код прямо из источника, который может быть проблемой.