Question

在此代码中，我想使3 div在向上滚动时加一，在向下滚动时递减。出于某种原因，第一次滚动时，它不会对所有div都起作用，并且它们的合计不正确。有人可以帮忙吗？

var Value = 1;

function show() {
    if (Value === null) {
        Value = 1;
    }
    document.getElementById("ValueCenter").innerHTML = Value;
    document.getElementById("ValueCenter").addEventListener('wheel', function (e) {
        if (e.deltaY < 0) {
            add();
        }
        if (e.deltaY > 0) {
            decrease();
        }
    });

}
function showRest() {
    document.getElementById("ValueUpper").innerHTML = Value - 1;
    document.getElementById("ValueDown").innerHTML = Value + 1;
}

function add() {
    document.getElementById("ValueCenter").innerHTML = Value++;
    document.getElementById("ValueUpper").innerHTML = Value++;
    document.getElementById("ValueDown").innerHTML = Value++;
}
function decrease() {
    document.getElementById("ValueCenter").innerHTML = Value--;
    document.getElementById("ValueUpper").innerHTML = Value--;
    document.getElementById("ValueDown").innerHTML = Value--;
}

#ValueUpper, #ValueCenter, #ValueDown{
  font-size: 20pt;
}

<!DOCTYPE html>
<head>
    <title>1</title>
<link rel="stylesheet" type="text/css" href="css/wheel.css">
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/wheel.js"></script>
</head>
<body onload="show(); showRest();">
        <div id="ValueUpper"></div>
        <div id="ValueCenter"></div> 
        <div id="ValueDown"></div>
</body>

Answer 1

您可以使用increment operator ++的前缀表示法，该前缀表示法会先递增该值，然后返回该新值，而不是使用后缀表示法（与decrement operator --相同）。

document.getElementById("ValueCenter").innerHTML = ++Value;
//                                                 ^^       prefix

Answer 2

var Value = 1;

        function show() {
            if (Value === null) {
                Value = 1;
            }
     document.getElementById("ValueCenter").innerHTML = Value;
           document.getElementById("ValueCenter").addEventListener('wheel', function (e) {
                if (e.deltaY < 0) {
                  
                       add();
                }
                if (e.deltaY > 0) {
                    decrease();
                  
                }
            });

        }
        function showRest() {
            document.getElementById("ValueUpper").innerHTML = Value-1;
            document.getElementById("ValueDown").innerHTML = Value+1;
        }

        function add() {
       document.getElementById("ValueCenter").innerHTML = ++Value;
            showRest();
        }
        function decrease() {
       document.getElementById("ValueCenter").innerHTML = --Value;
        showRest()
       }

#ValueUpper{
          font-size: 20pt;
        }

        #ValueCenter{
          font-size: 20pt;
        }

        #ValueDown{
          font-size: 20pt;
        }

<!DOCTYPE html>
    <head>
        <title>1</title>
     
    </head>
    <body onload="show(); showRest();">
            <div id="ValueUpper"></div>
            <div id="ValueCenter"></div> 
            <div id="ValueDown"></div>
    </body>

我的函数中的++没有添加正确的数字

2 个答案: