Question

我正在使用类select循环遍历每个specialMenuCat并获取其值。

我正在使用显示正确值的console.log()，但我不确定如何将其存储为稍后使用的变量。

<select class="specialMenuCat" name="menuCategory[]">
    <option value="apples">Apples</option>
    <option value="oranges">Oranges</option>
    <option value="peach">Peach</option>
    <option value="banana">Banana</option>
</select>


$('select.specialMenuCat').change(function(){   
    $('select.specialMenuCat').each(function(){
        var catVal = $(this).val();
        console.log(catVal);
    });
});

控制台日志的一个例子是;

apples (5)
oranges (4)
peach (5)
banana (5)

我尝试先设置vars然后递增它们但它不起作用。我的尝试;

$('select.specialMenuCat').change(function(){
    var apples = 0;
    $('select.specialMenuCat').each(function(apples){
        var catVal = $(this).val();
        if(catVal == apples) { apples++; }
        console.log(catVal);
    });
});

Answer 1

apples变量位于更改函数中，因此它不会出现在更改函数之外。这应该有效：

var apples = 0;

$('select.specialMenuCat').change(function(){
    apples = 0; //reset, because you will start a new count
    $('select.specialMenuCat').each(function(item){
        var catVal = $(this).val();
        if(catVal == "apples") { apples++; }
        console.log(catVal);
    });
});

function SomeOtherEvent(){
    console.log(apples);
}

Answer 2

在onchange范围之外初始化apple variable

因为每次重新初始化那就是为什么价值不会增加

var apple = 0;

var apple = 0;
$('select.specialMenuCat').change(function() {

  $('select.specialMenuCat').each(function() {
    var catVal = $(this).val();
    if (catVal == "apples") {
      apple++;
    }
    console.log(catVal);
  });
  console.log(apple);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="specialMenuCat" name="menuCategory[]">
  <option value="apples">Apples</option>
  <option value="oranges">Oranges</option>
  <option value="peach">Peach</option>
  <option value="banana">Banana</option>
</select>

Answer 3

声明一个对象，并在每次更改时将值推入其中

在结果中，您可以通过示例苹果数量访问属性名称来获取值result['apple']

参见belwon片段：

$('select.specialMenuCat').change(function(){   
    $(".as-console").html("");
    
    result = {};
    $('select.specialMenuCat').each(function(){
        
        if(!this.value) return;
        
        val = result[this.value];
        
        result[this.value] = typeof(val)== 'undefined' ? 1 : ++val;
        
        
    });
    
    
    console.log(result);
    
    
    
    for (var prop in result) {
      if (result.hasOwnProperty(prop)) { 
        console.log("number of "+ prop + " is: " + result[prop])
      }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="specialMenuCat" name="menuCategory[]">
    <option value=""></option>
    <option value="apples">Apples</option>
    <option value="oranges">Oranges</option>
    <option value="peach">Peach</option>
    <option value="banana">Banana</option>
</select>

<select class="specialMenuCat" name="menuCategory[]">
    <option value=""></option>
    <option value="apples">Apples</option>
    <option value="oranges">Oranges</option>
    <option value="peach">Peach</option>
    <option value="banana">Banana</option>
</select>

<select class="specialMenuCat" name="menuCategory[]">
    <option value=""></option>
    <option value="apples">Apples</option>
    <option value="oranges">Oranges</option>
    <option value="peach">Peach</option>
    <option value="banana">Banana</option>
</select>

<select class="specialMenuCat" name="menuCategory[]">
    <option value=""></option>
    <option value="apples">Apples</option>
    <option value="oranges">Oranges</option>
    <option value="peach">Peach</option>
    <option value="banana">Banana</option>
</select>

<select class="specialMenuCat" name="menuCategory[]">
    <option value=""></option>
    <option value="apples">Apples</option>
    <option value="oranges">Oranges</option>>
    <option value="date">Dates</option>
</select>

<select class="specialMenuCat" name="menuCategory[]">
    <option value=""></option>
    <option value="melon">Melon</option>
    <option value="oranges">Oranges</option>>
    <option value="date">Dates</option>
</select>

Answer 4

在以下演示中：

按照McCrossan先生的建议，创建一个对象文字，其中存储了水果变量。如果打算增加/减少值，请将变量保留在函数之外。在函数外引用一个值将创建一个闭包，这将导致一个值在函数运行时之后存在，从而确保在此基础上增加/缩小值。
将select.fruit注册到“更改”事件
使用this或event.target（在此演示this中使用）获取更改的选择的值。
通过switch()（通过选择开关是因为它很好地说明了意图）来运行值。
在每个匹配的case上，fruit属性的值在F对象以及相应的output中都增加。

演示

在演示中评论的详细信息

/* Object literal stores each value 
|| Note it is outside of a function
*/
var F = {
  apples: 0,
  oranges: 0,
  peaches: 0,
  bananas: 0
};

// Any change events that happen on a .fruit, callback runs
$('.fruit').on('change', fruitCount);

// This callback passes the Event Object (not used in this Demo)
function fruitCount(e) {

  // "this" is the <select> currently changed
  var currentPick = this.value;
  switch (currentPick) {

    /* if the value of "this" is "apples"...
    || increment the 'apples' property of the F Object
    || and then increment the value of output#A
    || But if it isn't apples fall onto the next case
    */ // Same applies to the other fruits
    case 'apples':
      F.apples++;
      $('#A').val(F.apples);
      break;
    case 'oranges':
      F.oranges++;
      $('#O').val(F.oranges);
      break;
    case 'peaches':
      F.peaches++;
      $('#P').val(F.peaches);
      break;
    case 'bananas':
      F.bananas++;
      $('#B').val(F.bananas);
      break;
    default:
      break;
  }
}

select,
label,
output {
  font: inherit;
}

label {
  display: inline-block;
  width: 8ch
}

<fieldset>
  <legend>Fruit-O-Rama</legend>
  <label>Apples: </label><output id='A'></output><br>
  <label>Oranges: </label><output id='O'></output><br>
  <label>Peaches: </label><output id='P'></output><br>
  <label>Bananas: </label><output id='B'></output><br>
</fieldset>
<select class="fruit" name="menu0[]">
  <option value=""></option>
  <option value="apples">Apples</option>
  <option value="oranges">Oranges</option>
  <option value="peaches">Peaches</option>
  <option value="bananas">Bananas</option>
</select>
<br>
<select class="fruit" name="menu1[]">
  <option value=""></option>
  <option value="apples">Apples</option>
  <option value="oranges">Oranges</option>
  <option value="peaches">Peaches</option>
  <option value="bananas">Bananas</option>
</select>
<br>
<select class="fruit" name="menu2[]">
  <option value=""></option>
  <option value="apples">Apples</option>
  <option value="oranges">Oranges</option>
  <option value="peaches">Peaches</option>
  <option value="bananas">Bananas</option>
</select>
<br>
<select class="fruit" name="menu3[]">
  <option value=""></option>
  <option value="apples">Apples</option>
  <option value="oranges">Oranges</option>
  <option value="peaches">Peaches</option>
  <option value="bananas">Bananas</option>
</select>
<br>
<select class="fruit" name="menu4[]">
  <option value=""></option>
  <option value="apples">Apples</option>
  <option value="oranges">Oranges</option>
  <option value="peaches">Peaches</option>
  <option value="bananas">Bananas</option>
</select>
<br>
<select class="fruit" name="menu5[]">
  <option value=""></option>
  <option value="apples">Apples</option>
  <option value="oranges">Oranges</option>
  <option value="peaches">Peaches</option>
  <option value="bananas">Bananas</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery将每个值存储为变量

4 个答案:

演示