如何使用开关和jquery更改SELECT FORM的值

How to CHANGE the VALUE of a SELECT FORM using a switch and jquery

本文关键字：SELECT FORM 的值 更改 jquery 何使用 开关      更新时间：2024-03-26

大家好，我正在制作一个计时器，遇到了一个问题。我正试图用一个选择的表格来加快和降低计时器的速度，但这不起作用。有人能解释我错在哪里吗？请

当然是在最后切换

这是我的代码：

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>

`：：

<input id="reset" type="button" value="reset">
<input id="pauseButton" type="button" value="Pause">
<input id="reprendreButton" type="button" value="Reprendre">
<form>
<select id="bla" >
<option value="x05">x05</option>
<option value="x1" selected>x1</option>
<option value="x2">x2</option>
<option value="x4">x4</option>
</select>
</form>

`

javascript

<script>


var timer = {
    totalSeconds: 0,
    start: function () {
        var mat = this;
        this.interval = setInterval(function () {
            mat.totalSeconds += 1;
            $("#heure").text(Math.floor(mat.totalSeconds / 3600));
            $("#min").text(Math.floor(mat.totalSeconds / 60 % 60));
            $("#sec").text(parseInt(mat.totalSeconds % 60));
        }, 1000);
    },


    pause: function () {
        this.interval =  clearInterval(this.interval);
        this.interval =  delete this.interval;
    },
    x05: function () {
        // this.interval = this.totalSeconds += 2;
        var mat = this;
        this.interval = setInterval(function () {
            mat.totalSeconds += 1/2;
            $("#heure").text(Math.floor(mat.totalSeconds / 3600));
            $("#min").text(Math.floor(mat.totalSeconds / 60 % 60));
            $("#sec").text(parseInt(mat.totalSeconds % 60));
        }, 1000);

    },
    x1: function () {
        // this.interval = this.totalSeconds += 2;
        var mat = this;
        this.interval = setInterval(function () {
            mat.totalSeconds += 1;
            $("#heure").text(Math.floor(mat.totalSeconds / 3600));
            $("#min").text(Math.floor(mat.totalSeconds / 60 % 60));
            $("#sec").text(parseInt(mat.totalSeconds % 60));
        }, 1000);

    },
    x2: function () {
       // this.interval = this.totalSeconds += 2;
        var mat = this;
        this.interval = setInterval(function () {
            mat.totalSeconds += 2;
            $("#heure").text(Math.floor(mat.totalSeconds / 3600));
            $("#min").text(Math.floor(mat.totalSeconds / 60 % 60));
            $("#sec").text(parseInt(mat.totalSeconds % 60));
        }, 1000);

    },
    x4: function () {
        // this.interval = this.totalSeconds += 2;
        var mat = this;
        this.interval = setInterval(function () {
            mat.totalSeconds += 4;
            $("#heure").text(Math.floor(mat.totalSeconds / 3600));
            $("#min").text(Math.floor(mat.totalSeconds / 60 % 60));
            $("#sec").text(parseInt(mat.totalSeconds % 60));
        }, 1000);

    },
    Reprendre: function () {
        this.interval = !this.interval;
        this.interval = this.start();
    },
    reset: function () {
      // clearInterval(this.interval);
        this.interval = this.totalSeconds -= this.totalSeconds +=1 ;

    }
};
timer.start();

$('#pauseButton').click(function () { timer.pause(); });
$('#reprendreButton').click(function () { timer.Reprendre(); });
$('#reset').click(function () { timer.reset(); });

$(document).ready(function(){
    switch($('#bla' ).val()) {
        case 'x05':
           /* $('#bla').click(function () { timer.x05(); }); */
            break;
        case 'x1':
          /*  $('#bla').click(function () { timer.x1(); }); */
            break;
        case 'x2':
           /* $('#bla').click(function () { timer.x2(); });  */
            break;
        case 'x4':
          /*  $('#bla').click(function () { timer.x4(); });  */
            break;
        default:
        //
    }
});

您只在文档准备好时检查#bla的值。你需要做：

$(document).ready(function(){
   $('#bla' ).on('change', function(){
     switch($(this.val())) {
        case 'x05':
             timer.x05(); 
            break;
        case 'x1':
           timer.x1();
            break;
        case 'x2':
             timer.x2();  
            break;
        case 'x4':
            timer.x4(); 
            break;
        default:
            //
            break;
      }
   });
});

在这里，当选择框发生变化时，您将检查#bla的值。然后在取消注释后运行函数。我不确定您的其他代码是否正常工作，但只要select中的值发生更改，就应该运行开关。

我做了一个CodePen，这就是我写JS的方式，所以我更容易弄清楚可能发生了什么：

https://codepen.io/dammeul/pen/GZQpqZ?editors=1010

目前时间是这样的，但它只暂停了一次，在再次开始间隔后，它似乎不想暂停。虽然它重置得很好，而且我不确定速度控制。看看吧，希望这能让你彻底解决这一切。

相关文章：