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" );
};

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

Answer 2

那是因为你做的很奇怪。当你写：

4000 > amountEmissions.toFixed(0) > 2000

评估类似

(4000 > amountEmissions.toFixed(0)) > 2000

并且因为真＆gt; 2000是假和假＆gt; 2000是错误的，你的代码将全部跳过它们。

P.S。我的控制台评估为真＆gt; 0为真。我认为这就是为什么你的最后一个if语句

2000 > amountEmissions.toFixed(0) > 0
(true) > 0

返回true :)

可能的JS / JQuery错误，只触发许多“if”语句事件之一

2 个答案: