Question

我做了什么：

01 ）我为HTML / CSS代码编写了一个具有实时预览的编辑器。

02 ）专家可以显示实际代码并从那里进行编辑。

03 ）业余爱好者可以使用输入框

更改值

你可以看看我在这里做了些什么： Original Link

我的问题：

我在输入框中输入内容并单击预览。有用。如果我第二次打字，那么它不会---＆gt; 仅考虑第一个输入值。

放弃我的问题：

SNIPPET （ 它会阻止iframe，所以请查看下面的jsfiddle链接 ）：

＆＃13;

$(function() {
  function GetHtml(){
    var html = $('.html').val();
    return html;
  }

  function GetCss(){
    var Css = $('.css').val();
    return Css;
  }

  function renderPreview() {
    var targetp = $('#previewTarget')[0].contentWindow.document;
    targetp.open();
    targetp.close();

    var html = GetHtml();
    var css = GetCss();

    $('body',targetp).append(html);
    $('head', targetp).append('<style>' + css + '</style>');
  }

  $('.innerbox').on("keyup", renderPreview);


  renderPreview();

});

$(document).ready(function(){

$('#Update').click(function(e) {
    console.log($('#thebox1').val());
    if($('#thebox1').val().length > 0) {
        var c = $('#thebox1').val();
        $('.popup1').removeClass().addClass(c).text(c);
    }

});


 document.getElementById("copyButton1").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget1"));
});

document.getElementById("copyButton2").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget2"));
});

var MyDiv1 = document.getElementById('copyTarget2');
var MyDiv2 = document.getElementById('copyTarget1');

$('#Update').click(function(e) {

  textareahtml.value=$.trim(MyDiv1.innerText) 
  textareacss.value=$.trim(MyDiv2.innerText)

  function GetHtml(){
    var html = $('.html').val();
    return html;
  }

  function GetCss(){
    var Css = $('.css').val();
    return Css;
  }
  
  function renderPreview() {
    var targetp = $('#previewTarget')[0].contentWindow.document;
    targetp.open();
    targetp.close();

    var html = GetHtml();
    var css = GetCss();

    $('body',targetp).append(html);
    $('head', targetp).append('<style>' + css + '</style>');
  }

  $('.innerbox').on("keyup", renderPreview);
  
  renderPreview();
  
});

});

＆＃13;

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


body {
    background: hsl(184,65%,49%);
    margin: 0;
    font-family: 'Lato';
    text-align: center;
    color: #000;
    font: 15px/1.4em;
}

pre {
    background-color: #333;
    padding: 6px;
    font-size: 12px;
    color: #2fbe35;
    line-height: 1.3em;
}
code {
    font-family: "Courier New", Courier, mono;
    color: #2fbe35;
}

blockquote {
    border: none;
    color: #fff;
    margin-right: 5%;
    margin-left: 5%;
}

.content
{
	width: 100%;
    margin: 0;
}

.column1   {
    width: 50%;
    height:auto;
    float: left;
}

.APOLO {
	font-family:Lato;
	background-color: #333;
    padding: 6px;
    font-size: 12px;
    line-height: 1.3em;
	
}

.column2  {
    width: 50%;
	height:auto;
    float:left;
}

textarea {
	display:block;
	font-family: Lato;
	background-color: #333;
    color: #2fbe35;
	width:100%;
	min-height:400px;
    border: none;
	resize: none;
	text-align:center;
}

button, #send, #send2 {
	border: none;
    font-family: Lato;
    font-size: 1vw;
    color: inherit;
    background: rgba(38,160,53,0.72);
    cursor: pointer;
    padding: 25px 80px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
	color: #333;
    border: 3px solid #333;
}

button:hover,#send:hover,#send2:hover {
    color: #333;
	background:#fff;
}

iframe {
	background:#333;
    border: 2px solid #333;
}

h1 {
    color: #fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.innerbox {
	background:#333;
}

/*  SECTIONS  */
.section {
	margin-left:5%;
	margin-right:5%;
	clear: both;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.5%;
}
.span_2_of_4 {
	width: 49%;
}
.span_1_of_4 {
	width: 23.5%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

input[type="text"] {
	width:90%;
	max-width:320px;
	background:#fff;
	color:#333;
	border: none;
    font-family: Lato;
    font-size: 0.9vw;
    padding: 25px 0 25px 0;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    border: 3px solid #333;
}

::-webkit-input-placeholder {
   color: #000;
   text-align:center;
}

.footer {
    background: #333;
	color:#fff;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 120px;
	font-size:1.5vw;
	font-family:inherit;
}    

#expand {
    background: none;
	color: #FFF;
    border: 3px solid #FFF;
	margin-bottom:2%;
    margin: 15px ;
}

.buttons {
	width:100%;
    font-family: Lato;
    font-size: 1vw;
    padding: 10px 15px 10px 0;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
	border: 3px solid #333;
	cursor:pointer;
}

#unhide {
	margin-top:30%;
	margin-bottom:20%;
}

#banner {
	min-height:50px;
    font-size: 2em;
	font-weight: bold;
	color:#fff;
	text-align:left;
}

#banner img {
	height:100%;
	max-height:100px;
}

/*  section2S  */
.section2 {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col2 {
	display: block;
	float:left;
	margin: 0;
}
.col2:first-child { margin-left: 0; }

/*  GROUPING  */
.group2:before,
.group2:after { content:""; display:table; }
.group2:after { clear:both;}
.group2 { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.66%; }
.span_1_of_3 { width: 33.33%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col2 {  margin: 0 }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

#Update {
	width:100%;
	background:#fff;
	color:#333;
    font-family: Lato;
    font-size: 1vw;
    padding: 10px 15px 10px 0;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
	border: 3px solid #333;
	cursor:pointer;
}

#expand::-webkit-input-placeholder {
   color: #fff;
   text-align:center;
}

＆＃13;

	<div style="display:none;" class="innerbox preview">
		<iframe id="previewTarget"></iframe>
	</div>
	<div class="section group">
		<div class="col span_1_of_4">
		<input type="text" placeholder="INPUT BOX VALUE" id='thebox1'>
		</div>
	</div>
	<div class="section group" >
		<div class="col span_2_of_4" style="background:#333;">	<div id="copyTarget2" contenteditable="true">
		<blockquote><pre><code><xmp><div class="topsection"><div class="title"></xmp><b class="popup1" style="color:#fff;">INPUT BOX VALUE</b><xmp></div></div></xmp></code></pre></blockquote>
	</div>
		</div>
	</div>
	<a href="#"><input class="buttons" id="Update" type="button" value="PREVIEW"" /></a>

＆＃13;

JSFIDDLE

PS：最糟糕的情况是使用重置（刷新页面）按钮：

<input type="button" value="Refresh Page" onClick="window.location.reload()">

Answer 1

问题是你在第一次点击后删除所有类，至少在小提琴上。在线：

$('.popup1').removeClass().addClass(c).text(c);

您也删除了.popup1类，因此您无法使用该选择器再次引用该元素。

解决方案可能是再次添加.popup1类（我知道你想删除所有其他类）所以，它看起来像这样：

$('.popup1').removeClass().addClass('popup1 '+c).text(c);

Updated Fiddle

未考虑第二输入框值

1 个答案: