javascript中錯誤的增量和減量

Question

從代碼中可以理解，我正在嘗試創建一個簡單的img庫。

我目前正面臨計算問題; 如果您運行執行這些操作的代碼段，您將在控制台日志中看到錯誤：

1. 單擊img，您將獲得當前點擊的ID的ID
2. 如果單擊下一步 ，則打印出的第一個數字與單擊的ID相同
3. 但如果你現在單擊后退 ，你會看到實際值是正確的“的原因是打印遞增的編號，你需要點擊遞減
4. 如果您現在點擊另一個img，您將獲得新點擊的div的ID
5. 但是如果你現在單擊prev或next，它會執行兩次遞增或遞減，看起來上一個變量$ph_id不被新id覆蓋

有人可以解釋一下問題的來源嗎？ 因為我認為代碼寫得正確，但顯然我錯過了一些東西。

[ 編輯 ]我把$('#next').click(function ()和$('#prev').click(function () $('.venus-div').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;

Answer 2

我認為這是因為您創建並綁定了每次單擊next和prev中的新單擊事件，並且由於此多重綁定而觸發多次。 您可以關閉這些事件或將它們綁定在venus-div點擊功能之外（使文檔中的ph_id，next_id和prev_id全局變量准備就緒。

我不能從手機編寫代碼，如果你需要我稍后會更新:)