一般说明 ：
我创建了一个使用input标记的页面。我在那里添加了一个值并单击button。然后，我添加的值显示在div中。
问题 ：
第一次单击按钮时，它会添加值。但是，如果我尝试在input标记中键入其他内容，然后再次点击button，则div会显示我第一次添加的值。
$('#one').click(function(e) {
console.log($('#thebox1').val());
if($('#thebox1').val().length > 0) {
var c = $('#thebox1').val();
$('.popup1').removeClass().addClass(c).text(c);
}
});/* 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;
}
input {
width:100%;
max-width:320px;
background:#fff;
color:#333;
font-family: Lato;
padding: 25px 15px 25px 0;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
border: 3px solid #333;
}
::-webkit-input-placeholder {
color: #000;
text-align:center;
}
.resizable-text {
font-size:1vw;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="VALUE " id='thebox1'>
<div><input id="one" style="background:#000;color:#fff;" type="button" value="PREVIEW"" /></div>
<blockquote>
<pre>
<code>
VALUE: <b class="popup1" style="color:#fff;">#value </b>;
</code>
</pre>
</blockquote>
答案 0 :(得分：3)
$('.popup1').removeClass()
此行删除了类＆＃34; popup1＆＃34;，因此您的选择器无法在第二次调用时找到该元素。
答案 1 :(得分：0)
问题在于：
$('.popup1').removeClass()
这会删除b元素中的所有类，但您下次无法找到该元素。
答案 2 :(得分：0)
问题：
之所以发生这种情况，是因为$('.popup1').removeClass()也会移除班级popup1，以便下次找不到任何类popup1的元素。
解决方案：
为避免您可以使用：
$('.popup1').removeClass().addClass('popup1 '+c).text(c);
//Or
$('.popup1').prop('class', 'popup1 '+popup1).text(c);
因此，每次删除所有类但添加主类popup1，以便脚本可以在下次调用中选择它。
希望这有帮助。
$('#one').click(function(e) {
console.log($('#thebox1').val());
if($('#thebox1').val().length > 0) {
var c = $('#thebox1').val();
$('.popup1').removeClass().addClass('popup1 '+c).text(c);
}
});/* 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;
}
input {
width:100%;
max-width:320px;
background:#fff;
color:#333;
font-family: Lato;
padding: 25px 15px 25px 0;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
border: 3px solid #333;
}
::-webkit-input-placeholder {
color: #000;
text-align:center;
}
.resizable-text {
font-size:1vw;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="VALUE " id='thebox1'>
<div><input id="one" style="background:#000;color:#fff;" type="button" value="PREVIEW"" /></div>
<blockquote>
<pre>
<code>
VALUE: <b class="popup1" style="color:#fff;">#value </b>;
</code>
</pre>
</blockquote>
答案 3 :(得分：0)
试试这个：
$('#one').click(function(e) {
if($('#thebox1').val()) {
$('.popup1').text($('#thebox1').val());
}
});/* 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;
}
input {
width:100%;
max-width:320px;
background:#fff;
color:#333;
font-family: Lato;
padding: 25px 15px 25px 0;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
border: 3px solid #333;
}
::-webkit-input-placeholder {
color: #000;
text-align:center;
}
.resizable-text {
font-size:1vw;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="VALUE " id='thebox1'>
<div><input id="one" style="background:#000;color:#fff;" type="button" value="PREVIEW"" /></div>
<blockquote>
<pre>
<code>
VALUE: <b class="popup1" style="color:#fff;">#value </b>;
</code>
</pre>
</blockquote>