【问题标题】:Counting occurrences of a given input [closed]计算给定输入的出现次数[关闭]
【发布时间】:2016-02-07 08:27:17
【问题描述】:

如果我有一个带有简单提交按钮的输入框,有没有办法跟踪在给出某些输入时单击按钮的次数。例如,我输入牛奶并点击提交,牛奶计数为 1,再次单击牛奶计数为 2。我知道使用一个简单的计数器变量,我可以跟踪计数,但计数本身不会匹配任何特定的输入,它只是按钮点击的通用计数器。我可以将输入中的值存储在一个数组中,然后计算特定项目的出现次数以找到它的计数,但是有没有更优雅的方法来做到这一点?

【问题讨论】:

    标签: javascript jquery


    【解决方案1】:

    您可以使用简单的object 来存储事件。基本思想是获取输入值并将其添加到对象中,使用输入作为索引,值是它被添加的次数。

    $(document).ready(function(){
        
      // Create simple storage
      var items = {};
      
      $('#submit').click(function(event){
        event.preventDefault();
        
        var item = $('#item').val();
        items[item] = items[item]+1 || 1;
        
        $('#result').html(JSON.stringify(items));
        
        $('#item').val('');
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="item" name="item">
    <input id="submit" type="submit">
    <div id="result">
    
    </div>

    【讨论】:

      【解决方案2】:

      没有 jQuery 的解决方案,以及一些格式很好的 JSON:

      // Create storage and find nodes we need
      var items = {};
      var btn = document.getElementById('submit');
      var textInput = document.getElementById('item');
      var result = document.getElementById('result');
      
      // Add event-handler for button click
      btn.addEventListener('click', function(event){
          event.preventDefault();
          
          // Increment counter
          items[textInput.value] = items[textInput.value]+1 || 1;
          
          // Prettyprint the result
          result.textContent = JSON.stringify(items, null, 2);
          
          // Reset text
          textInput.value = '';
      });
      <input id="item">
      <input id="submit" type="submit">
      <pre id="result">
      </pre>

      【讨论】:

        【解决方案3】:
        var listCount   = [];
        $("#getButton").click(function() {
            var getTextValue    = $("#getInput").val();
            if(getTextValue!="") {
                var initVal     = typeof(listCount[getTextValue])=="undefined" ? 0 : listCount[getTextValue];
                listCount[getTextValue] = parseInt(initVal)+1;
                alert(listCount[getTextValue]);
            }
            return false;
        });
        

        初始化一个数组var listCount = [];,将输入值存储为关联键,parseInt(initVal)+1增加n次点击的值。

        【讨论】:

        • '关联数组'是 JS 中弱类型的副作用。尽管此解决方案在这种特定情况下有效,但存在一些问题。例如,listCount.length 将始终导致 0,无论添加了多少项。欲了解更多信息,请查看associative arrays in JS
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-07-11
        • 2011-05-03
        • 2022-01-17
        • 2020-11-09
        • 1970-01-01
        • 2012-06-02
        相关资源
        最近更新 更多