2个容器相互取消 [英] 2 containers cancel eachother

查看：75
本文介绍了2个容器相互取消的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想知道我可以如何防止取消两个容器。代码几乎是相同的，我只是改变了一些事情，它不是我先放哪一个，但是第二个不工作，如果我将它们转换为我放置第一个作品但不是第二个的作品。我使用切换来一次显示一个。我只会发布我的代码的一小部分。
$ b 第一部分的JavaScript 

 < script> 
 var z = 1; //值使div可重叠
 $ b $（'＃addText'）。click（函数（e）{
 / **使div可拖曳** / 
 $（' < div />'，{
 class：'ui-widget-content'，
 appendTo：'.container'，
 draggable：{
 containment：'parent' ，
 start：function（event，ui）{
 $（this）.css（'z-index'，++ z）; 
} 
} 
 }）; 
}）; 
 
 $ b $（document）.on（dblclick，'.text'，function（）
 {
 $（this）.hide（）; $ （this）.closest（'。item'）。find（'。edit_text'）。val（$（this）.text（））。show（）; 
}）; 
 $ b $（document）.on（click，.edit_text，function（）
 {
 return false; 
}）; 
 
 $ b $（document）.on（click，function（）
 {
 var editingText = $（'。edit_text：visible'）; $ b $（b）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; //值使div可重叠
 $ b $（'＃addText'）。click（函数（e）{
 / **使div可拖曳** / 
 $（' < div />'，{
 class：'ui-widget-content'，
 appendTo：'.container4'，
 draggable：{
 containment：'parent' ，
 start：function（event，ui）{
 $（this）.css（'z-index'，++ z）; 
} 
} 
 }）; 
}）; 
 
 $ b $（document）.on（dblclick，'.text1'，function（）
 {
 $（this）.hide（）; $ （this）.closest（'。item1'）。find（'。edit_text1'）。val（$（this）.text（））。show（）; 
}）; （click，.edit_text1，function（）
 {
 return false; 
}）; 
 
 $ 
 
 $ b $（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 =buttonid =show_first>显示前端< / button> 
< button type =buttonid =show_second>显示返回< / button>

容器和输入文本的HTML（第一个）

 < div class =firstdiv>< center> Front< / center> 
< div class =container1style =float：left; > 
< p align =center>< textarea data-bind =value：textContentPlaceholder =输入要附加的文本rows =4cols =21>< / textarea> ;&安培; NBSP;&安培; NBSP;&安培; NBSP; 
< button type =buttondata-bind =click：addNew>创建< /按钮>< / p> 
< div id =boxclass =containerstyle =float：left;> 
 
< div data-bind =foreach：itemsclass =fix_backround> 
< div class =itemdata-bind =draggable：true，droppable：true> 
 
< center>< span class =textdata-bind =text：$ data>< / span>< input class =edit_text/>< /中心]，[< / DIV>< / DIV>< / DIV>< / DIV>< / DIV>

容器和输入文本的HTML（第二个） 

 < div class =seconddiv>< center> second< / center> 
< div class =container3style =float：left; > 
< p align =center>< textarea data-bind =value：textContent1Placeholder =输入要附加的文本rows =4cols =21>< / textarea> ;&安培; NBSP;&安培; NBSP;&安培; NBSP; 
< button type =buttondata-bind =click：addNew1>创建< / button>< / p>< / div> 
 
< div id =box1class =container4style =float：left;> 
 
< div data-bind =foreach：items1class =fix_backround1> 
< div class =item1data-bind =draggable：true，droppable：true> 
 
< center>< span class =text1data-bind =text：$ data>< / span>< input class =edit_text1/>< /中心]，[< / 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 =stylesheethref =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 =stylesheethref =// 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>


解决方案

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



您使用jQuery来控制显示哪个块，这是一个Knockout no-no。操作DOM是Knockout的工作。查看或 if 绑定来控制显示内容的方式。

i would like to know how i can prevent two containers from canceling. the codes are almost the same i just changed a few things it doesn't mater which one i put first but the second one is not working if i switched them around the one that i put first works but not the second one. I'm using toggle to display one at a time. I'm just going to post a small part of my code.

JavaScript for first part

<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 for second part

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

toggle

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

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

HTML for toggle

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

HTML for container and input text (first)

<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 for container and input text (second)

<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>

解决方案

You are including jQuery, Knockout, and jQuery-UI each twice. That's probably not the problem, but it's not good.

You're using jQuery to control which block displays, and that's a Knockout no-no. It is Knockout's job to manipulate the DOM. Have a look at Knockout templates, or the if binding for ways of controlling what displays.

这篇关于2个容器相互取消的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆