我希望將我添加的項目放在正確的類別下,並且每次只能添加一個。但看起來我同時將產品進入乳品和水果部分。任何人都可以幫助我嗎?這裏是我的代碼:將輸入附加到正確的類別JQUERY
$('#catty').change(function() {
if ($(this).val() == 'Dairy') {
$('#product-info').keydown(function (e) {
if (e.keyCode == 13) {
var add = $('#product-info').val();
$('.dairy-product').append('<li>' + add + '</li>');
}
})
}
});
$('#catty').change(function() {
if ($(this).val() == 'Fruits') {
$('#product-info').keydown(function (e) {
if (e.keyCode == 13) {
var add = $('#product-info').val();
$('.fruit-product').append('<li>' + add + '</li>');
}
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="catty" class="form-control" value="Select">
<option hidden >Select Catergory</option>
<option>Dairy</option>
<option>Frozen Foods</option>
<option>Fruits</option>
<option>Vegetables</option>
</select>
<div class="form-group">
<input type="text" class="form-control" id="product-info" placeholder="Item Name">
</div>
<button type="button" id="btn1" class="btn btn-primary">Add Item</button>
</form>
</div>
<div class="panel-group col-xs-12">
<div class="category">
<div class="my-panel parent">
<p class="description" id="dairy">Dairy</p>
<a href="#" class="add-item">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</div>
<ol class="dairy-product"></ol>
</div>
<div class="category">
<div class="my-panel parent">
<p class="description" id="fruits">Fruits</p>
<a href="#" class="add-item">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</div>
<ol class="fruit-product"></ol>
</div>
以下是一種整理代碼的方法。 http://codepen.io/anon/pen/OWmrrG –