输入文本在div中显示为double [英] input text is being displayed double in divs
本文介绍了输入文本在div中显示为double的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有人可以帮我吗？我一直在尝试几天，但这一直没有正常工作我的问题是，当我尝试输入一些文本，它正在每个div中显示双重，如果你需要进一步解释请问。尝试键入的东西，你会看到什么im谈论当我编辑他们一个更改颜色和其他大小和字体的原因是因为类是不同的每个div有一个目的不同的类
这是网站 http://amp.site88.net/
can someone please help me? i have been trying for days but this has not been working properly my problem is that when i try to enter some text it is being displayed double one in each div if you need further explanation please ask. try typing something and you will see what im talking about when i edit them one of them changes color and the other size and font the reason is because the class are different each div has a different class on purpose this is the site http://amp.site88.net/
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('.item1').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('.item1').find('.text').text($(editingText).val()).show();
}
});
ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
}
};
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('.item2').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('.item2').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());
$("#fs").change(function() {
//alert($(this).val());
$('.item1').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.item1').css("font-size", $(this).val() + "px");
});
$('.foo').click(function(){
$('.item2').css("color", $(this).attr('data-color'));
});
<style>.item{
width: 200px;
height: 200px;
padding: 0.5em;
background:transparent;
z-index: 1;
display:block;
}
.edit_text
{
display: none;
}
.edit_text1
{
display: none;
}
.fix_backround
{
background-color: transparent;
}
.container {
width: 500px;
height: 500px;
border: 2px solid;
position: relative;
overflow: auto;
}
</style><style>
.thumbs img{
margin:3px;
width:50px;
float:left;
}</style>
<style>
.bottlesWrapper img{
margin:3px;
width:400px;
float:left;
}</style>
<style>#main { border:1px solid #eee; margin:20px; width:410px; height:220px;}
</style>
<style type="text/css" media="screen">
.transparent { background:transparent }
</style>
<style>.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.white {
background: #FFFFFF;
}
.yellow {
background: #FAFF38;
}
.orange {
background: #FFA200;
}
.red {
background: #FF0000;
}
.dorange {
background: #FF5500;
}
.lgreen {
background: #80FF00;
}
.green {
background: #45C731;
}
.turk {
background: #17DDBC;
}
.lblue {
background: #00A2FF;
}.blue {
background: #1713F6;
}.purple {
background: #AB09D3;
}.black {
background: #000000;
}
</style><style> #mainTarget{
width:30px;
height:20px;
position:relative;
top:100px;
left:25%
}
.mainTarget{position:absolute; width:25px; height:25px;}
#target{
position:absolute;
height:25px;
width:25px;
background:url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
background-size:100%;
cursor:pointer;
z-index:1;
top:1;
right:1;
}
</style>
<form method="post" action="<?php echo $PHP_SELF;?>">
<div id="colour" >
<div class="foo white" data-color="#FFFFFF"></div>
<div class="foo black" data-color="#000000"></div>
<div class="foo yellow" data-color="#FAFF38"></div>
<div class="foo orange" data-color="#FFA200"></div>
<div class="foo red" data-color="#FF0000"></div>
<div class="foo dorange" data-color="#FF5500"></div>
<div class="foo lgreen" data-color="#80FF00"></div>
<div class="foo green" data-color="#45C731"></div>
<div class="foo turk" data-color="#17DDBC"></div>
<div class="foo lblue" data-color="#00A2ff"></div>
<div class="foo blue" data-color="#1713F6"></div>
<div class="foo purple" data-color="#AB09D3"></div>
</div>
<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>
</select>
<select id="size">
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
</form>
<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>
<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_text1"/>
</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">
推荐答案
代码，将一次给你一个。
This is the code that will give you ONE at a time. The working-independently thing isn't sorted yet, but I think it deserves an upvote!
var z = 1; //value to make div overlappable
var i = 0;
$('#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);
}
}
});
i++;
});
$(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());
$("#fs").change(function() {
//alert($(this).val());
$('.item').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.item').css("font-size", $(this).val() + "px");
});
$('.foo').click(function() {
$('.item').css("color", $(this).attr('data-color'));
});
<style> .item,
.item1 {
width: 200px;
height: 50px;
float: left;
padding: 0.5em;
background: transparent;
z-index: 1;
}
textarea {
float: left;
display: block;
margin-top: 20px;
margin-bottom: 30px;
margin-right: 80%;
}
.edit_text {
display: none;
}
.edit_text1 {
display: none;
}
.fix_backround {
background-color: transparent;
}
.container {
width: 500px;
height: 500px;
border: 2px solid;
position: relative;
overflow: auto;
}
</style><style> .thumbs img {
margin: 3px;
width: 50px;
float: left;
}
</style> <style> .bottlesWrapper img {
margin: 3px;
width: 400px;
float: left;
}
</style> <style>#main {
border: 1px solid #eee;
margin: 20px;
width: 410px;
height: 220px;
}
</style> <style type="text/css" media="screen"> .transparent {
background: transparent
}
</style> <style>.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.white {
background: #FFFFFF;
}
.yellow {
background: #FAFF38;
}
.orange {
background: #FFA200;
}
.red {
background: #FF0000;
}
.dorange {
background: #FF5500;
}
.lgreen {
background: #80FF00;
}
.green {
background: #45C731;
}
.turk {
background: #17DDBC;
}
.lblue {
background: #00A2FF;
}
.blue {
background: #1713F6;
}
.purple {
background: #AB09D3;
}
.black {
background: #000000;
}
</style><style> #mainTarget {
width: 30px;
height: 20px;
position: relative;
top: 100px;
left: 25%
}
.mainTarget {
position: absolute;
width: 25px;
height: 25px;
}
#target {
position: absolute;
height: 25px;
width: 25px;
background: url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
background-size: 100%;
cursor: pointer;
z-index: 1;
top: 1;
right: 1;
}
</style><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">
<form method="post" action="<?php echo $PHP_SELF;?>">
<div id="colour">
<div class="foo white" data-color="#FFFFFF"></div>
<div class="foo black" data-color="#000000"></div>
<div class="foo yellow" data-color="#FAFF38"></div>
<div class="foo orange" data-color="#FFA200"></div>
<div class="foo red" data-color="#FF0000"></div>
<div class="foo dorange" data-color="#FF5500"></div>
<div class="foo lgreen" data-color="#80FF00"></div>
<div class="foo green" data-color="#45C731"></div>
<div class="foo turk" data-color="#17DDBC"></div>
<div class="foo lblue" data-color="#00A2ff"></div>
<div class="foo blue" data-color="#1713F6"></div>
<div class="foo purple" data-color="#AB09D3"></div>
</div>
<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>
</select>
<select id="size">
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
</form>
<div class="item">
<textarea data-bind="value:textContent1" 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="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">X</span>
<br/>
<br/>
<center>
<span class="text i" data-bind="text:$data"></span>
<input class="edit_text" />
</center>
</div>
</div>
</div>
这篇关于输入文本在div中显示为double的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
