Question

我有一个JS代码用于计算我想在HTML中实现的调查中的得分：

function displayScore() 
{
    var score = $('<p>',{id: 'question'});
    var points = 0;
    for (var i = 0; i < selections.length; i++) 
    {
        for (var j = 0; j < questions[i].choices.length; j++)
        {
            if (selections[i] === j) 
            {
                points += questions[i].choiceValues[j];
            }
        }
    }
}

我想在整个调查过程中获得一个计数分数。我当前的HTML代码如下所示：

<html>
<head>
    <title>Form Project</title>
    <link type='text/css' rel='stylesheet' href='privacy toolkit.css'/>
    <link rel="stylesheet" type="text/css" 
          href="https://fonts.googleapis.com/css?family=Open Sans"/>
</head>
<body>
    <div id='container'>
        <div id='title'>
            <h1>The Privacy Toolkit</h1>
        </div>
        <br/>
        <div id='quiz'></div>
        <div class='button' id='next'><a href='#'>Next</a></div>
        <div class='button' id='prev'><a href='#'>Prev</a></div>
        <div class='button' id='start'> <a href='#'>Start Over</a></div>
        <!-- <button class='' id='next'>Next</a></button>
        <button class='' id='prev'>Prev</a></button>
        <button class='' id='start'> Start Over</a></button> -->
    </div>
    <script type='text/javascript' 
            src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
    </script>
    <script type='text/javascript' src='privacy toolkit.js'></script>
</body>
</html>

我相信这样做，应该有一个运行JS代码的容器div内部。

Answer 1

好的，所以让我们说你正在计算两种类型的分数：巧克力和香草

计数器HTML：

<h2>Chocolate</h2>
<div class="js-counter chocolate">
    <span class="js-counter__number"></span>
</div>

<h2>Vanilla</h2>
<div class="js-counter vanilla">
    <span class="js-counter__number"></span>
</div>

表格HTML：

<form>
   <input type="checkbox" name="vanilla" value="vanilla" data-count="vanilla" data-countby="1"/>
   <input type="checkbox" name="chocolate" value="chocolate" data-count="chocolate" data-countby="1"/>
</form>

为计数器创建一个类：

    var Counter = function(startingCount, $el, $counterTrigger){
       this.count = startingCount || 0;//defaults to 0
       this.$rootEl = $el;
       this.$counterTrigger = $counterTrigger;
       this.$counterText = this.$rootEl.find('.js-counter__number');
       this.setInitial();
       this.bindEvents();

    }
    //add an ADD method to this class
    Counter.prototype.add = function(countBy){
       this.count = this.count + parseInt(countBy);//add to the count property
       this.$counterText.text(this.count);

    }
   //set the initial value to the DOM
    Counter.prototype.setInitial = function(){
      this.$counterText.text(this.count);
    }
    //bind the USER EVENTS
    Counter.prototype.bindEvents = function(){
        var that = this;

        this.$counterTrigger.on('change', function(){
            if(this.checked){
                that.add(that.$counterTrigger.attr('data-countBy'));
            }
        });
    }

当页面准备就绪时，实例化类

$(function(){
    var counters = [];

    counters.push( new Counter(0,$('.js-counter.chocolate'),$('[data-count="chocolate"]')) );
    counters.push( new Counter(0,$('.js-counter.vanilla'),$('[data-count="vanilla"]')) );

});

这并不完美。它还对你的计算内容，触发计数的内容等做了一些假设。

但基本的想法是你要跟踪某些事情。这可能是很多事情，所以这就是为什么它是一个班级。

实例化类时，可以传入所有参数。这是我马虎的地方。有更高效，更清洁的方法来做到这一点。但这个想法是为每个计数器创建一个初始值。将DOM元素存储为属性。

然后我用setInitial（）;

创建计数器文本

在更改输入时，执行您需要的任何检查，然后将所需的金额添加到计数器计数中。然后使用计数器计数简单地更新视图。但是这种方式存储DOM元素并仅更新文本要容易得多。这样，对这些元素的引用就存储在内存中了＃c; cached＆＃34;而且您以后不需要查询它们。我会建议阅读ES5和ES6课程。这将有助于实现这一目标。

请记住：查询和更新DOM元素非常昂贵。尽可能少做这件事，你就会好。

如果您有疑问，请

这里有一个https://plnkr.co/edit/1XXlsfMy01KR6ascFciG?p=preview

在HTML中实现外部JS代码

1 个答案: