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

Question

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

我的问题是，当我点击x删除选择，我不知道如何获取只需点击删除并填充到下拉列表中的整个drop-item。现在只有x回到选项列表中。

有没有人有任何想法？

另外，有人可以请分享一个快速指针，如何让选项框列表消失，当我点击它之外？无论现在如何，它都会保持在那里。

Here is a fiddle.

$('#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) { 
 
    // \t $(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(); 

这给我们带来了我们的第三个问题因为现在我们已经生成了新的元素，它在下拉列表看起来不错，但是，它不会给你以前.drop-item-input事件监听回应。我们需要修改这个监听器来处理动态添加的元素，方法如下：

$(document).on('change', '.drop-item-input', function() { 
    /* Rest of your code */ 
}); 

下面是一个包含更新的JSFiddle这些修改和你预期它应该工作。