第二组文字未显示

Question

＆＃13;

＆＃13;

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



$("#fss").change(function() {
  selectedDraggable.css("font-family", $(this).val());
});



$("#size1").change(function() {
  selectedDraggable.css("font-size", $(this).val() + "px");
});


$('.fooo').click(function() {
  selectedDraggable.css("color", $(this).attr('data-color'));
});

$(document).ready(function() {
  $("#rotateButton1").click(function() {
    var x = $("#rotateInput").val();
    selectedDraggable.css('transform', 'rotate(' + x + 'deg)');

  });
});

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

$('#addText1').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());



$("#fs").change(function() {
  selectedDraggable.css("font-family", $(this).val());
});



$("#size").change(function() {
  selectedDraggable.css("font-size", $(this).val() + "px");
});


$('.foo').click(function() {
  selectedDraggable.css("color", $(this).attr('data-color'));
});

$(document).ready(function() {
  $("#rotateButton").click(function() {
    var x = $("#rotateInput").val();
    selectedDraggable.css('transform', 'rotate(' + x + 'deg)');

  });
});
$("#curveup").click(function() {
  selectedDraggable.circleType({
    fitText: true,
    radius: 100
  });
});

$("#demo1").circleType({
  radius: 100
});

$("#curvedown").click(function() {
  selectedDraggable.circleType({
    fitText: true,
    radius: 100,
    dir: -1
  });
});
$("#demo2").circleType({
  radius: 100,
  dir: -1
});


$("#circle").click(function() {
  selectedDraggable.circleType();
});

$("#demo3").circleType();
$("#curveup1").click(function() {
  selectedDraggable.circleType({
    fitText: true,
    radius: 100
  });
});

$("#demo4").circleType({
  radius: 100
});

$("#curvedown1").click(function() {
  selectedDraggable.circleType({
    fitText: true,
    radius: 100,
    dir: -1
  });
});
$("#demo5").circleType({
  radius: 100,
  dir: -1
});


$("#circle1").click(function() {
  selectedDraggable.circleType();
});

$("#demo6").circleType();

$("#show_front").click(function() {
  $(".frontdiv").toggle();
  $(".backdiv").hide();
});

$("#show_back").click(function() {
  $(".backdiv").toggle();
  $(".frontdiv").hide();
});

＆＃13;

.item {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  background: transparent;
  z-index: 1;
  cursor: pointer;
  display: block;
}
.item1 {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  background: transparent;
  z-index: 1;
  cursor: pointer;
  display: block;
}
.preview-area {
  width: 100px;
  height: 100px;
  background: transparent;
}
.preview-area1 {
  width: 100px;
  height: 100px;
  background: transparent;
}
.edit_text {
  display: none;
}
.edit_text1 {
  display: none;
}
.fix_backround {
  background-color: transparent;
}
.fix_backround1 {
  background-color: transparent;
}
.backdiv {
  display: none;
}
.container {
  background-color: transparent;
  width: 150px;
  height: 150px;
  border: 2px solid;
  position: relative;
  overflow: hidden;
  /* Will stretch to specified width/height */
  background-size: 490px 500px;
  background-repeat: no-repeat;
}
.container1 {
  background-color: lightgrey;
  width: 350px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: auto;
}
.container2 {
  background-color: lightgrey;
  width: 350px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: auto;
}
.container3 {
  background-color: lightgrey;
  width: 350px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: auto;
}
.container4 {
  background-color: transparent;
  width: 150px;
  height: 150px;
  border: 2px solid;
  position: relative;
  overflow: hidden;
}
.container5 {
  background-color: transparent;
  width: 220px;
  height: 290px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid red;
  position: absolute;
  overflow: hidden;
}

＆＃13;

<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>
<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>
<link rel="stylesheet" href="/resources/demos/style.css">
<div class="overall">
  <div class="backdiv">
    <center>Back</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>





      </p>



      <div id="curveup1">
        <p class="cup1" id="demo4">Curve Down.</p>
      </div>
      <div id="curvedown1">
        <p class="cud1" id="demo5">Curve UP.</p>
      </div>
      <div id="circle1">
        <p class="circl1" id="demo6">Circle Text.</p>
      </div>


      <p align="center">
        <button type="button" id="remove1" class="remover1">Remove Text</button>
      </p>
      </center>
      <p align="center"></p>
    </div>

    <center>
      <div id="box1" class="container4" style="float:left;">
        <div id="boxes1" class="container5" style="float:center;">
          <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>
          <span id="image" class="preview-area1"></span>
        </div>
        <br>
        <br>
        <br>
        <br>
      </div>
    </center>
  </div>
  <div class="frontdiv">
    <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>
      <center>
        <div id="draggableHelper" style="display:inline-block">
          <input type="file" class="dimmy" id="image-input" multiple />
        </div>
      </center>

      <center>
        <div id="curveup">
          <p class="cup" id="demo1">Curve Down.</p>
        </div>
        <div id="curvedown">
          <p class="cud" id="demo2">Curve UP.</p>
        </div>
        <div id="circle">
          <p class="circl" id="demo3">Circle Text.</p>
        </div>


        <p align="center">
          <button type="button" id="remove" class="remover">Remove Text</button>
        </p>
      </center>
      <p align="center"></p>
    </div>

    <center>
      <div id="box" class="container" style="float:left;">
        <div id="boxes" class="container5" style="float:center;">
          <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>
          <span id="image" class="preview-area"></span>
        </div>
        <br>
        <br>
        <br>
        <br>
      </div>
    </center>
  </div>

  <div class="container2" style=" float: left;">
    <button type="button" id="show_front">Display Front</button>
    <button type="button" id="show_back">Display Back</button>

  </div>

＆＃13;

＆＃13;

＆＃13;

这很难解释我有一个切换，允许我从一个div切换到另一个但是当我这样做时，第二个（backdiv）将不允许我显示任何文本如果我将backdiv移动到开头我会让我输入文字，但另一个div不会输入任何文本我试过很多东西我尝试结合它们它没有工作我检查我的代码，一切似乎是正确我也在单个页面上做了个别div效果很好但是当我把它们放在同一页面时，一个人取消另一个我能做什么？