Question

我希望我添加的项目在正确的类别下，一次只能添加一个。但似乎我得到的产品同时进入乳品和水果部门。有人可以帮助我吗？这是我的代码：

<template>
  <div>
   ....
    <product-choices :product="product" @selectPC="getSelected(productChoice)"></product-choices>
   ....
  </div>
</template>

<script>
  import productChoices from './Item-card-product-choices.vue';
  export default {
    components:{
      'product-choices':productChoices
    },
    data(){
      return{
        productChoiceSelected:{},
      }
    },
    methods:{
      getSelected(selected){
        var vm = this
          alert(1) // this is what I added to test if it listens 
        vm.$on('select',function(selected){
          vm.$http.get('/getProductChoice/'+vm.product.id+'/'+selected).then((response)=>{
            vm.productChoiceSelected = response.data
          });
        })
      }
   }
</script>

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

Answer 1

＆＃13;

$('#product-info').keydown(function(e) {
  var selectid = $('#catty option:selected').text().toLowerCase()
  if (e.keyCode == 13) {
    var add = $('#product-info').val();
    
    $("."+selectid +'-product').append('<li>' + add + '</li>');
  }
})

＆＃13;

<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="fruits-product"></ol>


  </div>

＆＃13;

将OL课程从水果改为水果。
不需要调用select的更改功能，只需获取当前选定的值，然后将其用作enter键的参数。
如果在选择

Answer 2

对于ID为onchange的元素，您有两个catty事件处理程序。还有两个keydown的事件处理程序，它们位于这两个onchange处理程序中的同一元素上。修改您的代码，以便简化处理程序：

$('#product-info').keydown(function(e) {
    if (e.keyCode == 13) {
        var add = $('#product-info').val();
        var value = $("#catty").text(); 
        if(value !== '') {
           $('.' + value.toLowerCase() + '-product').append('<li>' + add + '</li>');
        }
    }
});

将输入附加到正确的类别JQUERY

2 个答案: