Question

我有一个div字段，点击后会创建一个下拉菜单。每当您单击下拉选项选项时，名称将转到div字段#proposal-type。您可以继续单击以添加其他选项。

我的问题是，当我点击x删除选项时，我无法弄清楚如何获取刚刚点击的整个drop-item被删除并填回下拉列表。现在只有x回到选项列表。

有没有人有任何想法？

此外，有人可以分享一个快速指针，说明当我点击它之外时如何让选项框列表消失吗？无论现在什么，它都会留在那里。

$('#proposal-type').click(function() {
  $('#proposal-type-drop').addClass('active');
});
$('#proposal-type').text("Type of Project *");
$('.drop-item-input').on('change', function() {
  var proposalVal = "";
  var proposalHtml = "";
  $('.drop-item-input').each(function() {
    if ($(this).is(":checked")) {
      proposalVal += $(this).val();
      proposalHtml += '<div class="drop-item-selected"><span class="drop-item-close"></span>' + $(this).val() + '</div>';
      $(this).closest('label').fadeOut();
    };
    //else if ($(this).is(":checked") === false) {
    //	$(this).closest('label').fadeIn();
    //};
    $('#proposal-type').val(proposalVal).html(proposalHtml);
    $('#proposal-type-drop').removeClass('active');
  });
  //values
  var type = $('.drop-item-input:checked').map(function() {
    return $(this).val();
  }).get().join(', ');
  console.log(type);
});
$(document).on('click', '.drop-item-close', function() {
  console.log("Triggered");
  $(this).fadeOut("medium", function() {
    $(this).detach().appendTo('#proposal-type-drop').fadeIn();
  });
  $(this).is(":checked") === false;
  $(this).closest('label').fadeIn();
  $(this).closest('.drop-item-selected').fadeOut();
});

.panel-input {
  box-sizing: border-box;
  border: 1px solid #858585;
  display: inline-block;
  vertical-align: top;
  width: 45%;
  margin: 1.5% 2% 2.5% 2%;
}

.proposal-input {
  width: 100%;
}

#proposal-type-drop {
  width: 45%;
  display: none;
  position: absolute;
}

#proposal-type-drop.active {
  background: rgba(0, 0, 0, 1);
  display: block;
  height: auto;
  z-index: 1;
}

.drop-item {
  color: #FFF;
  font-size: 1rem;
  padding: 7px 5px;
  font-family: 'Open Sans', sans-serif;
  background: rgba(0, 0, 0, .8);
  display: block;
  width: 100%;
  cursor: pointer;
}

.drop-item-input {
  display: none;
}

.drop-item-selected {
  background: #0085A1;
  color: #333333;
  padding: 5px;
  font-size: .9rem;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
  width: auto;
  display: inline-block;
  margin: 0 3px;
}

.drop-item-close {
  display: inline-block;
  background-image: url("http://www.clipartbest.com/cliparts/dT8/xnA/dT8xnAqAc.png");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  height: 10px;
  width: 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: ease 0.1s;
  -webkit-transition: ease 0.1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-input">
  <div id="proposal-type" class="proposal-input"></div>
  <div id="proposal-type-drop">
    <label class="drop-item">Apple<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Apple"></label>
    <label class="drop-item">Banana<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Banana"></label>
    <label class="drop-item">Cake<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Cake"></label>
  </div>
</div>

Answer 1

这里有一些问题，我试图纠正。我应该在一开始就警告你，这种感觉非常黑，因为我不想尝试重写你的代码，你可能想要研究一种不同的方法，也许不使用复选框，因为它们似乎使系统过于复杂。

第一个问题正如詹姆斯在评论中所说的那样，因为你只是在下拉列表中出现十字架的原因是由于选择了$(this)时的十字架你实际上正在寻找父母，可以通过$(this).parent()来实现。

第二个问题是你的第二个JSFiddle，你已经纠正了第一个问题，但是，你的代码不能正常工作，因为你现在正在插入另一个类型在您的下拉元素中不包含复选框的元素，当您尝试单击它时会导致一大堆麻烦。解决此问题的方法是插入新的HTML元素，就像在代码的上一部分中一样，并删除列表中的旧元素。导致对.drop-item-close eventListener方法进行以下修改;

$("#proposal-type-drop input[value='"+$(this).parent().text()+"']").remove();
$("#proposal-type-drop").append('<label class="drop-item">'+$(this).parent().text()+'<input type="checkbox" name="prop-type[]" class="drop-item-input" value="'+$(this).parent().text()+'"></label>').fadeIn();
$(this).parent().detach();

这将我们带到第三个问题，因为现在我们已经生成了一个新元素，它在下拉列表中看起来很棒，但是，它不会响应您之前的{{1 eventListener。我们需要修改这个监听器，以便按照以下方式处理动态添加的元素;

.drop-item-input

以下是包含这些修改的更新JSFiddle，它应该按照您的意图运作。

问题是获取正确的$（this）元素以追加到列表

1 个答案: