javascript - .blur() 声音通知

Question

我有两个文本框，其值为"is"和“否”。当我在第一个文本框中输入"is"时，它会发出蜂鸣声，其余文本框也会发生同样的情况。当我在相应的文本框中输入正确的值时，声音应该仅播放一次。

就我而言，声音一次又一次地重复......我不知道可能是什么原因。

<input type="text" id="question"/>
<input type="text" id="question1"/> 
<audio src="beep.mp3" id="mp3" preload="auto"></audio>

function checkResults() {

    if ($('#question').val().toLowerCase() == 'yes') {
            document.getElementById("mp3").play();

    }

    if ($('#question1').val().toLowerCase() == 'no') {
        document.getElementById("mp3").play();
    }


}

$('input').blur(checkResults);

Answer 1

由于您正在检查 blur 事件，因此声音会多次播放，因此每次用户模糊出框时，只要框内有正确答案，声音就会重播。相反，您应该检查 keyup 事件。

示例:

var answers = {
    'question': 'yes',
    'question1': 'no'
};

function checkResults() {
    var $this = $(this), val = $this.val().toLowerCase();

    for (var k in answers) {
        if (answers.hasOwnProperty(k)) {
            if (answers[$this.attr('id')] && answers[$this.attr('id')] === val) {
                  play(); 
            }
        }
    }   
}

function play() {
    var sound = document.getElementById('mp3');
    sound.pause();
    sound.currentTime = 0;
    sound.play();
}

$('input').on('keyup', checkResults);

JSFiddle 演示

<强> http://jsfiddle.net/7ahpgt5s/