Question

我想知道如何防止两个容器取消。代码几乎是相同的我只是更改了一些东西，它不会影响哪一个我放在第一个，但第二个是不工作，如果我切换它我的第一个工作而不是第二个工作。我正在使用切换来一次显示一个。我只想发布我的一小部分代码。

第一部分的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 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

看起来你的第二个类的切换js中有一个拼写错误。你错过了一个＆＃39; n＆＃39;在你的jquery中调用它：secoddiv。如果此代码是直接来源可能是问题。

Answer 2

您每次都包含jQuery，Knockout和jQuery-UI两次。这可能不是问题，但并不好。

你正在使用jQuery来控制哪个块显示，这就是Knockout no-no。操纵DOM是Knockout的工作。请查看Knockout templates或if binding以了解控制显示内容的方法。

2个容器互相取消

2 个答案: