将输入标签中的文本添加到 div，然后重复

Question

一般说明：

我制作了一个使用 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>

Answer 1

$('.popup1').removeClass()

此行删除了 class "popup1"，因此您的选择器在第二次调用时无法再找到该元素。

Answer 2

问题是这样的：

$('.popup1').removeClass()

这将从 b 元素中删除所有类，您下次将无法找到该元素。

Answer 3

问题：

发生这种情况是因为 $('.popup1').removeClass() 也会删除 class popup1，所以下次它找不到任何带有 class popup1 的元素。

解法：

要避免这种情况，您可以使用：

$('.popup1').removeClass().addClass('popup1 '+c).text(c);
//Or
$('.popup1').prop('class', 'popup1 '+popup1).text(c);

因此每次您删除所有 classes 但添加主要 class popup1 以便脚本可以在下一次调用中 select 它。

希望这对您有所帮助。

$('#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>

Answer 4

试试这个：

$('#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>

将输入标签中的文本添加到 div，然后重复

Add text from an input tag to a div and then repeat

javascript

html

css

input

removeclass