无法定位按键以完成操作答案

【问题标题】：Having trouble targeting key presses to complete an action无法定位按键以完成操作
【发布时间】：2016-05-20 15:00:24
【问题描述】：

我有 Prev/Next 按钮。使用我即将提供的代码，它会添加和删除一个类 .fadeaway。

$("a.next").click(function(){
        var elem=document.querySelector("#project-container");

        elem.classList.add("fadeaway");
        setTimeout(function(){
        goToNextProject();  
        elem.classList.remove("fadeaway")
        }, 350)

        return false;
    });

    $("a.prev").click(function(){
        var elem=document.querySelector("#project-container");

        elem.classList.add("fadeaway");
        setTimeout(function(){
        goToPrevProject();  
        elem.classList.remove("fadeaway")
        }, 350)

        return false;
    });

顺便说一句，我敢打赌有一种方法可以将这两者结合起来。所以问题出在按键上。我目前有 js 也可以使用箭头键导航上一个/下一个项目。

function activateKeyNav()
    {
        // Description: register keypress event on document object
        jQuery(document).on('keydown', function(event) {
            switch(event.which)
            {
                case 39: // right
                    goToNextProject();
                    break;

                case 37: // left
                    goToPrevProject();
                    break;
            }
        });
    }

我不确定如何创建.fadeaway 所做的动画，它是0，所以它会淡入淡出#project-container。我需要它，如果按下左键或右键，它会添加和删除.fadeaway 类，就像a.next 和a.prev 正在做的那样。

要获得一个工作示例，请单击上一个/下一个按钮here。

【问题讨论】：

你能创作小提琴吗？
@DarrenBachan 结合两个事件处理程序是可以的。你要问的另一件事是什么？小提琴会很有帮助
@Chintan 我不确定如何为此构建小提琴。我定位的#project-container 从字符串加载数据。 prev/next 按钮打开和关闭#project-container。它很复杂，并不理想，但它是当前构建的方式。我可以向您展示的最佳示例是我帖子中的链接，当您打开项目并单击上一个/下一个按钮时，您会看到 div 淡出。我需要箭头键来做同样的事情。
@DarrenBachan 你想在箭头键按下时添加fadeaway 类？
@Chintan 不，看看我的帖子，看看 a.next/a.prev 在做什么。我需要在按下箭头键时发生这种情况。想象一下，我将“a.next”替换为“arrowkey-right”。

标签： javascript jquery

【解决方案1】：

您可以编写一个包装函数，添加渐隐类并执行 setTimeout。

function toggleFadeAwayClass(){
    var elem=document.querySelector("#project-container");
    elem.classList.add("fadeaway");
    setTimeout(function(){ 
        elem.classList.remove("fadeaway")
    }, 350)
}

function activateKeyNav()
    {
        // Description: register keypress event on document object
        jQuery(document).on('keydown', function(event) {
            switch(event.which)
            {
                case 39: // right
                    toggleFadeAwayClass();
                    goToNextProject();
                    break;

                case 37: // left
                    toggleFadeAwayClass();
                    goToPrevProject();
                    break;
            }
        });
    }

希望对你有所帮助。

【讨论】：

这真的很接近。我更新了文件，因此我原始帖子中的链接显示了此代码。有点奇怪。上一个/下一个按钮很好地淡化，但是用箭头键我看到了 div，它淡出，然后又淡入。
在对此进行了更多实验后，我不得不将其删除。它最终使键盘上的任何键触发.fadeaway。
糟糕，我错过了。您需要在开关盒内添加调用。更新了回复
这解决了这个问题，所以箭头键只能工作，但由于某种原因，淡入淡出不能正常工作。 .fadeaway 类具有不透明度：0。删除它使其成为 1. 基本上，当下一个项目出现时，它会淡出然后淡入，但由于某种原因，它会出现，淡出，然后淡入。我不知道为什么它会做 opacity 1, 0 , 1. 上一个/下一个按钮完全按照我的意愿淡化。
查看上一个/下一个按钮的工作原理。它将 .fadeaway 添加到#project-container，转到下一个项目，然后删除该类。现在，在您提供的代码中，它转到下一个项目，然后添加 .fadeaway。

【解决方案2】：

在分析 js 以确切了解褪色的工作原理，并使用另一个答案的部分代码后，这就是我如何让它完全按照我想要的方式褪色：

function activateKeyNav()
    {
        // Description: register keypress event on document object
        jQuery(document).on('keydown', function(event) {
            switch(event.which)
            {
                case 39: // right
                var elem=document.querySelector("#project-container");
                    elem.classList.add("fadeaway");
                    setTimeout(function(){
                        goToNextProject();  
                        elem.classList.remove("fadeaway")
                    }, 350)
                    // toggleFadeAwayClass();
                    // goToNextProject();
                    break;

                case 37: // left
                var elem=document.querySelector("#project-container");
                    elem.classList.add("fadeaway");
                    setTimeout(function(){
                        goToPrevProject();  
                        elem.classList.remove("fadeaway")
                    }, 350)
                    // toggleFadeAwayClass();
                    // goToPrevProject();
                    break;

                case 27: // escape
                    hasher.setHash();
                    projectClose();
                    break;
            }
        });
    }

我认为如果定义了var elem=document.querySelector("#project-container");，我就不再需要它了，所以我在没有它的情况下尝试了它，而elem 没有定义，所以它产生了一个控制台错误。是否可以在最顶部建立这个变量，这样我就不需要继续写了？

【讨论】：