Question

我想要做的是计算我的灯泡打开的持续时间。

我写了这个脚本来控制切换图像和计算秒数，但由于某种原因，第二个图像正常计数，第一个图像停在一个。

$("#changePic").live('click', function() {
            if ($(this).attr("class") == "changePicA") {
                this.src = this.src.replace("images/blackA","images/whiteA");
                timer=true; 
                myVar; 

            } else {
                this.src = this.src.replace("images/whiteA","images/blackA");
                timer=false; 

            }

            if ($(this).attr("class") == "changePicB") {
                this.src = this.src.replace("images/blackB","images/whiteB");
                timerA=true; 
                myVarA; 
            } else {
                this.src = this.src.replace("images/whiteB","images/blackB");
                timerA=false;
            }

            $(this).toggleClass("on");
        });

    });

    var myVar = setInterval(function(){ myTimer() }, 1000);
    var timer= false; 
    var seconds=0; 
    function myTimer() {

        if (timer){
            seconds++; 
            document.getElementById("counter").innerHTML = seconds
            console.log("counting here");


        }else{

            clearInterval(seconds);
            document.getElementById("counter").innerHTML = seconds;
            console.log("stopped counting here");
        }


    }
    var myVarA = setInterval(function(){ myTimerA() }, 1000);
    var timerA= false; 
    var secondsA=0; 
    function myTimerA() {

        if (timerA){
            secondsA++; 
            document.getElementById("counterA").innerHTML = secondsA;


        }else{

            clearInterval(seconds);
            document.getElementById("counterA").innerHTML = secondsA; 
        }


    }

我的表看起来像这样：

<table class="buttonTable">
        <tr>
            <td><button class="equiptButton"><img src="images/blackA.jpg" id="changePic" class="changePicA"/></button></td>
            <td id="counter"></td><td id="counterA"></td>
            <td id="bill"> <button id= "estimatedbill" onclick="estimatedbill();">  Estimated bill:</button> <p>....</p></td>
            <td><button class="equiptButton"><img src="images/blackB.jpg" id="changePic" class="changePicB" /></button></td>    

            <td><button class="equiptButton"><img src="images/blackC.jpg" id="changePic" class="changePicC" /></button></td>
        </tr>
    </table>

Answer 1

正如Samural所说，.live（）已被弃用。

要明确：在现代版本的jQuery中，您的代码将类似于：

$("body").on("click", "#changePic", function(){...});

也就是说，您将偶然处理程序附加到正文，然后每次检查接收到该事件的实际目标是否与您的选择器匹配。如果你想实现可以使用将来创建的元素的事件处理程序，这很有用，但我认为情况并非如此。所以做这样的事情就足够了：

$("#changePic").on("click", function(){...});

另外，我没有看到你的HTML，但是，通过你的评论，我发现你正在尝试管理两个似乎具有相同ID的图像：这是非法的，你可能最终只匹配最后一个（但取决于浏览器的实现，因为这是一个意想不到的情况）。

另一方面，我检测到一个 timer 变量未在该处理程序中的任何地方声明，但它与在全局范围内声明的另一个 timer 变量匹配（因此，如果我没有错，你是在覆盖它。）

我建议您使用

启动脚本

"use strict";

...然后纠正将出现的所有错误。

一页中有多个计时器

1 个答案: