javascript - javascript中错误的递增和递减

Question

由于从代码中可以理解，我正在尝试创建一个简单的 img 图库。

我目前正面临计算问题；如果您运行执行这些操作的代码片段，您将在控制台日志中看到问题所在:

1. 点击一个 img 你会得到当前点击的 id 的 id
2. 如果您点击下一步，它打印出的第一个数字与点击的 id 相同
3. 但是如果你现在点击prev你会看到这个值实际上是正确的因为它打印增加的数字你需要点击减少
4. 如果您现在点击另一个 img，您将获得新点击的 div 的 ID
5. 但如果您现在单击prev 或next，它会执行递增或递减两次，并且看起来前一个变量$ph_id 是未被新 ID 覆盖

有人可以解释一下问题出在哪里吗？因为我认为代码写对了，但显然我遗漏了什么。

[EDIT] 我把 $('#next').click(function () 和 $('#prev').click (function () 在 $('.venus-div').click(function () 之外，第 4 点和第 5 点的问题现已解决

$(document).ready(function () {
    
        $('.venus-div').click(function () {
            $this       = $(this);
            $ph_id      = $this.attr('id');
            console.log('Current id: ' + $ph_id);
        });
        
        $('#next').click(function () {
                $next_id    = $ph_id++;
                console.log('Next id: ' + $next_id);
        });
        
        $('#prev').click(function () {
                $prev_id    = $ph_id--;
                console.log('Prev id: ' + $prev_id);
        });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="venus-div" id="1" data-image="../img/bv.jpg">
        <img src="../img/thumb/bv_thumb.jpg" class="venus-thumb">
    </div>
    <div class="venus-div" id="2" data-image="../img/islamuj.jpg">
        <img src="../img/thumb/islamuj_thumb.jpg" class="venus-thumb">
    </div>
    <div class="venus-div" id="3" data-image="../img/vertical.jpg">
        <img src="../img/thumb/vertical_thumb.jpg" class="venus-thumb">
    </div>
    <div class="venus-div" id="4" data-image="../img/pano.jpg">
        <img src="../img/thumb/pano_thumb.jpg" class="venus-thumb">
    </div>
    <p id="prev">BACK</p>
    <p id="next">NEXT</p>

Answer 1

$next_id = $ph_id++; 将 $next_id 设置为 $ph_id 的当前值，然后递增$ph_id 加一。如果您希望增量首先发生，您可以像这样将 ++ 放在变量之前:

$next_id = ++$ph_id;

有了这个，$next_id 将等于递增的 $ph_id。

这同样适用于--:

$prev_id = --$ph_id;