javascript - 最小形式 BACK 按钮 questionNumber interference

Question

我在 Codrops form 中添加了一个后退按钮.

这是一个 webpage从我的网站上实现了表格​​。

问题是，如果用户快速按下后退按钮(针对上一个问题)，则 questionNumber 计数器会重叠，数字最终看起来会混淆。

有人能帮忙吗？

完整 JavaScript和 CSS下面的片段是主要关注点。

.simform .number {
	position: absolute;
	right: 0;
	overflow: hidden;
	margin: 0.4em 0;
	width: 3em;
	font-weight: 700;
	font-size: 0.4em;
}

.simform .number:after {
	position: absolute;
	left: 50%;
	content: '/';
	opacity: 0.4;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.simform .number span {
	float: right;
	width: 40%;
	text-align: center;
}

.simform .number .number-current {
	float: left;
}

.simform .number-next {
	position: absolute;
	left: 0;
}

.simform.show-next .number-current {
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

.simform.show-next .number-next {
	-webkit-animation: moveUpFromDown 0.4s both;
	animation: moveUpFromDown 0.4s both;
}

.simform.show-previous .number-current {
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

.simform.show-previous .number-next {
	-webkit-animation: moveDownFromUp 0.4s both;
	animation: moveDownFromUp 0.4s both;
}

Answer 1

修复:

a) 更改第 275 行附近的部分:

// changes the current question number
stepsForm.prototype._updateQuestionNumber = function() {

    if (this.nextQuestionNum) this.questionStatus.removeChild( this.nextQuestionNum ); // remove if it still exists (when user clicks forwards or back before animation ends)
    this.nextQuestionNum = document.createElement( 'span' );

    this.nextQuestionNum.className = 'number-next';
    this.nextQuestionNum.innerHTML = Number( this.current + 1 );
    // insert it in the DOM
    this.questionStatus.appendChild( this.nextQuestionNum );
};

b) 更改第 195 行附近的部分:

    // after animation ends, remove class "show-next" from form element and change current question placeholder
    var self = this,
        onEndTransitionFn = function( ev ) {
            if( support.transitions ) {
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            if( self.isFilled ) {
                self._submit();
            }
            else {
                classie.removeClass( self.el, 'show-next' );
                self.currentNum.innerHTML = self.nextQuestionNum.innerHTML;
                self.questionStatus.removeChild( self.nextQuestionNum );
                self.nextQuestionNum = null; // set to null to indicate that it has been removed

                // force the focus on the next input
                nextQuestion.querySelector( 'input' ).focus();
            }
        };

b) 更改第 257 行附近的部分:

    // after animation ends, remove class "show-previous" from form element and change current question placeholder
    var self = this,
        onEndTransitionFn = function( ev ) {
            if( support.transitions ) {
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            if( self.isFilled ) {
                self._submit();
            }
            else {
                classie.removeClass( self.el, 'show-previous' );
                self.currentNum.innerHTML = self.nextQuestionNum.innerHTML;
                self.questionStatus.removeChild( self.nextQuestionNum );
                self.nextQuestionNum = null; // set to null to indicate that it has been removed

                // force the focus on the next input
                previousQuestion.querySelector( 'input' ).focus();
            }
        };

解释:

这个部分有问题:

// changes the current question number
    stepsForm.prototype._updateQuestionNumber = function() {
        // first, create next question number placeholder
        this.nextQuestionNum = document.createElement( 'span' );
        this.nextQuestionNum.className = 'number-next';
        this.nextQuestionNum.innerHTML = Number( this.current + 1 );
        // insert it in the DOM
        this.questionStatus.appendChild( this.nextQuestionNum );
    };

具体来说，行 this.nextQuestionNum = document.createElement( 'span' );。

发生的事情是它创建了 span 并保存了对它的引用 (this.nextQuestionNum)。动画结束后，该元素将使用该引用销毁。

当用户点击速度过快(即比动画运行速度快)时，上述代码会第二次执行，因此会创建一个新的 span 并保存对它的引用。在这一点上，如果原始 span 没有被删除，那么代码就失去了指向它的指针，并且像难闻的气味一样徘徊。

因此 if 语句检查它是否不为 null 并将其删除。