从输入字段追加具有多个参数的元素

Question

任务是使用输入字段中的3个类和自定义文本中的任何一个添加li。问题是，即使我清除字段值为空字符串，下次你只需点击“确定”即可。使用空输入并添加最后一个值。我在这里错过了什么？而且，当我点击它外面时，如何让该字段消失？

＆＃13;

＆＃13;

$('#skill').val('');

$('.skillList').on('click', 'li span', function() {
  $(this)
    .parent()
    .remove();
});

var skillName = '';
var skillLevel = 'strong';

$('#skill').change(function() {
  skillName = $(this).val();
});

$('#level').change(function() {
  skillLevel = $(this).val();
});

$('.skills-add button').click(function() {
  if (skillName || skillName != '') {
    $('.skillList').append(
      '<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
    );
    $('#skill').val('');
    $('.addSkill').show();
    $('.skill_fields')
      .hide()
      .blur();
  } else {
    return false;
  }
});

$('.addSkill').click(function(e) {
  $(this).hide();
  $('.skill_fields')
    .show()
    .focus();
  e.preventDefault();
});

＆＃13;

.skills-block ul.skillList {
  list-style: none;
  padding-left: 0;
}

.skills-block ul.skillList li {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 6px;
  margin-bottom: 6px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  font-size: 1em;
  position: relative;
}

.skills-block ul.skillList li span {
  content: "no";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.8em;
  background-color: red;
  cursor: pointer;
  display: none;
}

.skills-block ul.skillList li:hover span {
  display: inline;
}

.skills-block ul.skillList li.strong {
  background-color: #000000;
}

.skills-block ul.skillList li.normal {
  background-color: #5c5c5c;
}

.skills-block ul.skillList li.low {
  background-color: #a2a2a2;
}

.skills-add {
  position: relative;
}

.skills-add .skill_fields {
  display: none;
}

.skills-add .skill_fields button {
  position: absolute;
  right: 10px;
  top: 6px;
  background-color: #fff;
  border: 1px solid #adadad;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
}

.skills-add .skill_fields select {
  position: absolute;
  right: 50px;
  top: 5px;
  padding: 4px 10px;
  background-color: #fff;
  border: 1px solid #adadad;
  border-radius: 3px;
  color: #000000;
}

.skills-add .skill_fields input {
  width: 100%;
  padding: 10px 5px;
  background-color: #fff;
  border: 1px solid green;
  color: #000000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-block">
  <ul class="skillList">
    <li class="strong">PHP <span>no</span> </li>
    <li class="strong">Ruby <span>no</span> </li>
    <li class="normal">Javascript <span>no</span> </li>
    <li class="low">Actionscript <span>no</span> </li>
  </ul>
</div>
<!-- /.skills-block -->
<div class="skills-add">
  <a href="#" class="addSkill">Add skill</a>
  <div class="skill_fields">
    <input type="text" name="skill" id="skill" value="">
    <select name="level" id="level">
      <option value="strong">Strong</option>
      <option value="normal">Normal</option>
      <option value="low">Low</option>
    </select>
    <button>ok</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

然后输入字段上的change事件未检测到所有操作，而是使用input事件，在跟踪用户输入时更有效：

$('#skill').on('input', function() {
  skillName = $(this).val();
});

$('#level').on('input', function() {
  skillLevel = $(this).val();
});

＆＃13;

＆＃13;

$('#skill').val('');

$('.skillList').on('click', 'li span', function() {
  $(this)
    .parent()
    .remove();
});

var skillName = '';
var skillLevel = 'strong';

$('#skill').on('input', function() {
  skillName = $(this).val();
});

$('#level').on('input', function() {
  skillLevel = $(this).val();
});

$('.skills-add button').click(function() {
  if (skillName || skillName != '') {
    $('.skillList').append(
      '<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
    );
    $('#skill').val('');
    $('.addSkill').show();
    $('.skill_fields')
      .hide()
      .blur();
  } else {
    return false;
  }
});

$('.addSkill').click(function(e) {
  $(this).hide();
  $('.skill_fields')
    .show()
    .focus();
  e.preventDefault();
});

＆＃13;

.skills-block ul.skillList {
  list-style: none;
  padding-left: 0;
}

.skills-block ul.skillList li {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 6px;
  margin-bottom: 6px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  font-size: 1em;
  position: relative;
}

.skills-block ul.skillList li span {
  content: "no";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.8em;
  background-color: red;
  cursor: pointer;
  display: none;
}

.skills-block ul.skillList li:hover span {
  display: inline;
}

.skills-block ul.skillList li.strong {
  background-color: #000000;
}

.skills-block ul.skillList li.normal {
  background-color: #5c5c5c;
}

.skills-block ul.skillList li.low {
  background-color: #a2a2a2;
}

.skills-add {
  position: relative;
}

.skills-add .skill_fields {
  display: none;
}

.skills-add .skill_fields button {
  position: absolute;
  right: 10px;
  top: 6px;
  background-color: #fff;
  border: 1px solid #adadad;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
}

.skills-add .skill_fields select {
  position: absolute;
  right: 50px;
  top: 5px;
  padding: 4px 10px;
  background-color: #fff;
  border: 1px solid #adadad;
  border-radius: 3px;
  color: #000000;
}

.skills-add .skill_fields input {
  width: 100%;
  padding: 10px 5px;
  background-color: #fff;
  border: 1px solid green;
  color: #000000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-block">
  <ul class="skillList">
    <li class="strong">PHP <span>no</span> </li>
    <li class="strong">Ruby <span>no</span> </li>
    <li class="normal">Javascript <span>no</span> </li>
    <li class="low">Actionscript <span>no</span> </li>
  </ul>
</div>
<!-- /.skills-block -->
<div class="skills-add">
  <a href="#" class="addSkill">Add skill</a>
  <div class="skill_fields">
    <input type="text" name="skill" id="skill" value="">
    <select name="level" id="level">
      <option value="strong">Strong</option>
      <option value="normal">Normal</option>
      <option value="low">Low</option>
    </select>
    <button>ok</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加当前值后，

SkillName永远不会重置为默认值。

＆＃13;

＆＃13;

$('#skill').val('');

$('.skillList').on('click', 'li span', function() {
  $(this)
    .parent()
    .remove();
});

var skillName = '';
var skillLevel = 'strong';

$('#skill').change(function() {
  skillName = $(this).val();
});

$('#level').change(function() {
  skillLevel = $(this).val();
});

$('.skills-add button').click(function() {
  if (skillName || skillName != '') {
    $('.skillList').append(
      '<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
    );
    $('#skill').val('');
    skillName="";
    $('.addSkill').show();
    $('.skill_fields')
      .hide()
      .blur();
  } else {
    return false;
  }
});

$('.addSkill').click(function(e) {
  $(this).hide();
  $('.skill_fields')
    .show()
    .focus();
  e.preventDefault();
});

＆＃13;

.skills-block ul.skillList {
  list-style: none;
  padding-left: 0;
}

.skills-block ul.skillList li {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 6px;
  margin-bottom: 6px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  font-size: 1em;
  position: relative;
}

.skills-block ul.skillList li span {
  content: "no";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.8em;
  background-color: red;
  cursor: pointer;
  display: none;
}

.skills-block ul.skillList li:hover span {
  display: inline;
}

.skills-block ul.skillList li.strong {
  background-color: #000000;
}

.skills-block ul.skillList li.normal {
  background-color: #5c5c5c;
}

.skills-block ul.skillList li.low {
  background-color: #a2a2a2;
}

.skills-add {
  position: relative;
}

.skills-add .skill_fields {
  display: none;
}

.skills-add .skill_fields button {
  position: absolute;
  right: 10px;
  top: 6px;
  background-color: #fff;
  border: 1px solid #adadad;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
}

.skills-add .skill_fields select {
  position: absolute;
  right: 50px;
  top: 5px;
  padding: 4px 10px;
  background-color: #fff;
  border: 1px solid #adadad;
  border-radius: 3px;
  color: #000000;
}

.skills-add .skill_fields input {
  width: 100%;
  padding: 10px 5px;
  background-color: #fff;
  border: 1px solid green;
  color: #000000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-block">
  <ul class="skillList">
    <li class="strong">PHP <span>no</span> </li>
    <li class="strong">Ruby <span>no</span> </li>
    <li class="normal">Javascript <span>no</span> </li>
    <li class="low">Actionscript <span>no</span> </li>
  </ul>
</div>
<!-- /.skills-block -->
<div class="skills-add">
  <a href="#" class="addSkill">Add skill</a>
  <div class="skill_fields">
    <input type="text" name="skill" id="skill" value="">
    <select name="level" id="level">
      <option value="strong">Strong</option>
      <option value="normal">Normal</option>
      <option value="low">Low</option>
    </select>
    <button>ok</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需将skillName值重置为skillName =“”

$('#skill').val('');

$('.skillList').on('click', 'li span', function() {
  $(this)
    .parent()
    .remove();
});

var skillName = '';
var skillLevel = 'strong';

$('#skill').change(function() {
  skillName = $(this).val();
});

$('#level').change(function() {
  skillLevel = $(this).val();
});

$('.skills-add button').click(function() {
 $('#skill').val("");
  if (skillName || skillName != '') {
     
    $('.skillList').append(
      '<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
    );

    $('.addSkill').show();
    skillName = "";
    $('.skill_fields')
      .hide()
      .blur();
  } else {
    return false;
  }
});

$('.addSkill').click(function(e) {
  $(this).hide();
  $('.skill_fields')
    .show()
    .focus();
  e.preventDefault();
});

.skills-block ul.skillList {
  list-style: none;
  padding-left: 0;
}

.skills-block ul.skillList li {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 6px;
  margin-bottom: 6px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  font-size: 1em;
  position: relative;
}

.skills-block ul.skillList li span {
  content: "no";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.8em;
  background-color: red;
  cursor: pointer;
  display: none;
}

.skills-block ul.skillList li:hover span {
  display: inline;
}

.skills-block ul.skillList li.strong {
  background-color: #000000;
}

.skills-block ul.skillList li.normal {
  background-color: #5c5c5c;
}

.skills-block ul.skillList li.low {
  background-color: #a2a2a2;
}

.skills-add {
  position: relative;
}

.skills-add .skill_fields {
  display: none;
}

.skills-add .skill_fields button {
  position: absolute;
  right: 10px;
  top: 6px;
  background-color: #fff;
  border: 1px solid #adadad;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
}

.skills-add .skill_fields select {
  position: absolute;
  right: 50px;
  top: 5px;
  padding: 4px 10px;
  background-color: #fff;
  border: 1px solid #adadad;
  border-radius: 3px;
  color: #000000;
}

.skills-add .skill_fields input {
  width: 100%;
  padding: 10px 5px;
  background-color: #fff;
  border: 1px solid green;
  color: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-block">
  <ul class="skillList">
    <li class="strong">PHP <span>no</span> </li>
    <li class="strong">Ruby <span>no</span> </li>
    <li class="normal">Javascript <span>no</span> </li>
    <li class="low">Actionscript <span>no</span> </li>
  </ul>
</div>
<!-- /.skills-block -->
<div class="skills-add">
  <a href="#" class="addSkill">Add skill</a>
  <div class="skill_fields">
    <input type="text" name="skill" id="skill" value="">
    <select name="level" id="level">
      <option value="strong">Strong</option>
      <option value="normal">Normal</option>
      <option value="low">Low</option>
    </select>
    <button>ok</button>
  </div>
</div>

Answer 4

您忘记重置技能名称变量值。

$('#skill').val('');

$('.skillList').on('click', 'li span', function() {
  $(this)
    .parent()
    .remove();
});

var skillName = '';
var skillLevel = 'strong';

$('#skill').change(function() {
  skillName = $(this).val();
});

$('#level').change(function() {
  skillLevel = $(this).val();
});

$('.skills-add button').click(function() {
  if (skillName || skillName != '') {
    $('.skillList').append(
      '<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
    );
    $('#skill').val('');
    skillName = ""; // Reset it after adding;
    $('.addSkill').show();
    $('.skill_fields')
      .hide()
      .blur();
  } else {
    return false;
  }
});

$('.addSkill').click(function(e) {
  $(this).hide();
  $('.skill_fields')
    .show()
    .focus();
  e.preventDefault();
});

.skills-block ul.skillList {
  list-style: none;
  padding-left: 0;
}

.skills-block ul.skillList li {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 6px;
  margin-bottom: 6px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  font-size: 1em;
  position: relative;
}

.skills-block ul.skillList li span {
  content: "no";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.8em;
  background-color: red;
  cursor: pointer;
  display: none;
}

.skills-block ul.skillList li:hover span {
  display: inline;
}

.skills-block ul.skillList li.strong {
  background-color: #000000;
}

.skills-block ul.skillList li.normal {
  background-color: #5c5c5c;
}

.skills-block ul.skillList li.low {
  background-color: #a2a2a2;
}

.skills-add {
  position: relative;
}

.skills-add .skill_fields {
  display: none;
}

.skills-add .skill_fields button {
  position: absolute;
  right: 10px;
  top: 6px;
  background-color: #fff;
  border: 1px solid #adadad;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
}

.skills-add .skill_fields select {
  position: absolute;
  right: 50px;
  top: 5px;
  padding: 4px 10px;
  background-color: #fff;
  border: 1px solid #adadad;
  border-radius: 3px;
  color: #000000;
}

.skills-add .skill_fields input {
  width: 100%;
  padding: 10px 5px;
  background-color: #fff;
  border: 1px solid green;
  color: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-block">
  <ul class="skillList">
    <li class="strong">PHP <span>no</span> </li>
    <li class="strong">Ruby <span>no</span> </li>
    <li class="normal">Javascript <span>no</span> </li>
    <li class="low">Actionscript <span>no</span> </li>
  </ul>
</div>
<!-- /.skills-block -->
<div class="skills-add">
  <a href="#" class="addSkill">Add skill</a>
  <div class="skill_fields">
    <input type="text" name="skill" id="skill" value="">
    <select name="level" id="level">
      <option value="strong">Strong</option>
      <option value="normal">Normal</option>
      <option value="low">Low</option>
    </select>
    <button>ok</button>
  </div>
</div>

Answer 5

您使用全局变量skill_name，并且在添加后永远不会更新或重置它，因此您的添加按钮代码应为：

$('.skills-add button').click(function() {
  if (skillName || skillName != '') {
    $('.skillList').append(
      '<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
    );
    $('#skill').val('');
    $('.addSkill').show();
    skillName ='';
    $('.skill_fields')
      .hide()
      .blur();
  } else {
    return false;
  }
});