javascript - 可能的 JS/JQuery 错误，仅触发许多 "if"语句事件之一

Question

我正在尝试构建类似于下面屏幕截图的内容。我已经设法解决了大部分问题，除了我编写的 JS/JQuery 似乎无法正常工作。理想情况下，这是应该发生的事情:

• 一旦前两个栏中的任何一个从其默认位置移动，“我的自定义计划”按钮就会激活。

• 如果第二个栏中的数字介于 8000 和 6000 之间，底部栏中的前两个图标会突出显示。

• 如果第二个柱的数字介于 6000 和 4000 之间，所有图标都会突出显示。

• 如果第二个栏中的数字介于 4000 和 2000 之间，则除第一个图标外的所有图标都会突出显示。

• 如果第二个柱的数字介于 2000 和 0 之间，最后三个图标会突出显示。

我遇到的问题是，只有在超过最后一个阈值(2000 到 0 之间)时，“我的自定义计划”按钮才会激活并显示相应的图标。当第二个条超过任何其他阈值时，没有任何适当的图标突出显示。这是我现在编写的 JS/JQuery:

<!-- Script for Dragabble Emissions Bar -->
<script>
    $(function(){
        var initialWidth = 9.1;
        var dragging = false;

        $('.dragme2').mousedown(function(e){
            dragging = true;
            var parentOffset = $(this).parent().offset();
            e.preventDefault();

            $(document).mousemove(function(e){
                if (dragging == true){
                    $('.dragme2').css("width",e.pageX - parentOffset.left,);
                    $('.dragme2').css("max-width", 728);
                    $('.dragme2').css("min-width", 10);
                    var amountEmissions = ((e.pageX - parentOffset.left) / initialWidth * 100)
                    $('.result2').html(amountEmissions.toFixed(0) + "lbs");
                        if (amountEmissions.toFixed(0) > 8000){
                            $('.result2').html(8000 + "lbs" );
                        };
                        if (amountEmissions.toFixed(0) <= 0){
                            $('.result2').html(0 + "lbs" );
                        };
                        if (8000 > amountEmissions.toFixed(0) > 6000){
                            $("#Button2").click();
                            $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
                            $(".st04, .st05").css({fill:"rgb(236,182,30)"})}

                        if (6000 > amountEmissions.toFixed(0) > 4000){
                            $("#Button2").click();
                            $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
                            $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"rgb(236,182,30)"})};

                        if (4000 > amountEmissions.toFixed(0) > 2000){
                            $("#Button2").click();
                            $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
                            $(".st05, .st06, .st07, .st08, .st09").css({fill:"rgb(236,182,30)"})};

                        if (2000 > amountEmissions.toFixed(0) > 0){
                            $("#Button2").click();
                            $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
                            $(".st07, .st08, .st09").css({fill:"rgb(236,182,30)"})};

                    }
                });
            });

        $(document).mouseup(function(e){
            if (dragging){
                dragging = false;
                console.log('drag stopped');
            }
        });
    });
</script>

我相信您能看出来，我是个初学者。谁能告诉我我可能哪里出错了，或者可能是另一种解决方法？非常感谢!

Design Screenshot

Answer 1

在 JavaScript 中，你不能进行三元比较——其中有两个 >。

改为使用else if:

if (amountEmissions.toFixed(0) > 8000){
    $('.result2').html(8000 + "lbs" );
} else if (amountEmissions.toFixed(0) > 6000){
    $("#Button2").click();
    $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
    $(".st04, .st05").css({fill:"rgb(236,182,30)"})
} else if (amountEmissions.toFixed(0) > 4000){
    $("#Button2").click();
    $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
    $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"rgb(236,182,30)"})
} else if (amountEmissions.toFixed(0) > 2000){
    $("#Button2").click();
    $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
    $(".st05, .st06, .st07, .st08, .st09").css({fill:"rgb(236,182,30)"})
} else if (amountEmissions.toFixed(0) > 0){
    $("#Button2").click();
    $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
    $(".st07, .st08, .st09").css({fill:"rgb(236,182,30)"})
} else { // if (amountEmissions.toFixed(0) <= 0){
    $('.result2').html(0 + "lbs" );
};

此外，在 $('.dragme2').mousedown 事件处理程序之外定义 $(document).mousemove 事件处理程序。否则，您将在每次有鼠标按下事件时创建该事件处理程序，并累积它们。