Question

对于为什么jQuery理解我的逻辑但在按键上选定的DIV上的show()和hide()无法正常运行（但在页面加载时适用于hide()）感到困惑。

这是我的PHP页面末尾的脚本。

<script>
jQuery(function(){

        $("#resultset_2").hide();
        $("#resultset_3").hide();

// this is working -- `#resultset_2` and `#resultset_3`
// are both set to "display:none;" on page load

    $(document).keydown(function (e) {

    var keyCode = e.keyCode || e.which,
      arrow = {left: 37, up: 38, right: 39, down: 40 };

    switch (keyCode) {
    case arrow.left:
      // tbd
    break;
    case arrow.up:
      // tbd
    break;
    case arrow.right:
      // tbd
    break;

    case arrow.down:

    if($('#resultset_1').is(':visible')){

        alert('visible');
        $("#resultset_1").hide();
        $("#resultset_2").show();

    }

    if($('#resultset_2').is(':visible')){

        $("#resultset_2").hide();
        $("#resultset_3").show();

    }
    if($('#resultset_3').is(':visible')){

        $("#resultset_3").hide();
        $("#resultset_1").show();

    }
    break;
    }
    });
});
</script>

Keypress功能正常运行，所以我知道这不是问题。当我按下键盘上的down时，我会收到警告'visible'弹出窗口，表明$resultset_1可见。

但之后没有任何反应，jQuery在我的情况下会忽略$("#resultset_1").hide();和$("#resultset_2").show();。

我尝试过各种变体，例如

   if($('#resultset_1').is(':visible')){
        alert('visible');
        $('#resultset_1').css('display','none');
    }

具有相同的结果（警报但忽略div更改）

为什么这不能正常运行？如何修复它按定义工作？使用缩小的jQuery v3.3.1

Answer 1

在带有提醒的if语句中，您取消隐藏#resultset_2，因此会执行第二个if语句并再次隐藏#resultset_2，并显示#resultset_3 。下一个if语句也会发生同样的事情，隐藏#resultset_3并再次显示#resultset_1。您应该生成后两个if语句else if语句。

在KeyPress上隐藏/显示DIV不工作jQuery

1 个答案: