Question

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

我目前面临计算问题;如果您运行执行这些操作的代码段，您将会在控制台日志中看到错误：

点击img，您将获得当前点击ID的ID
如果您点击下一个，则打印出的第一个号码与点击的ID相同
但如果您现在点击上一步，您会看到实际上该值是正确的，因为它会打印增加的数字，您需要点击才能减少
如果您现在点击另一个img，您将获得新点击的div的ID
但如果您现在点击上一步或下一步，它会执行两次递增或递减，而前一个变量$ph_id似乎不会被新id

有人可以解释一下问题的来源吗？＆＃39;因为我认为代码写得正确，但显然我错过了一些东西。

[编辑]我将$('#next').click(function ()和$('#prev').click(function ()置于$('.venus-div').click(function ()之外，问题点4和5现已解决< / p>

＆＃13;

$(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);
        });

    });

＆＃13;

<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>

＆＃13;

Answer 1

$next_id = $ph_id++;将$next_id设置为当前值$ph_id，然后将$ph_id增加1。如果您希望首先发生增量，可以将++ 放在变量之前，如下所示：

$next_id = ++$ph_id;

这样，$next_id将等于递增的$ph_id。

同样适用于--：

$prev_id = --$ph_id;

Answer 2

我认为这是因为你创建并绑定每次点击下一个和上一个新点击事件，并且由于这个多重绑定而多次触发。您可以关闭这些事件或将它们绑定在venus-div点击功能之外（使文档中的ph_id，next_id和prev_id全局变量准备就绪。

我无法从移动设备上编写代码，如果您需要我稍后再更新:)

javascript

2 个答案: