Question

我正在处理div类的块，使用键盘向上和向下箭头按钮来控制它们。我有块列表，其中7个正在显示，而其他块正在隐藏。我有从块1到块17的块文本。当我按下块1到块17的向下箭头按钮时，块将使用＆＃39; rowheight＆＃39;它看起来不错，但有一个问题。当我在方框7之后按下向上箭头按钮和向下箭头按钮时，这些方块应该停留在它们所在的位置，但是当黄色方块位于方框8，方框9，方框10，方框11时，它将向上移动，方框12，方框13，方框14，方框15，方框16和方框17。

我认为问题出现在这段代码中：

if (event.keyCode == 40) 
  {    //down
    if(current_col < totalrowcount && current_row == 1)
    {
      if(current_col >= displayrowcount)
      {
        var currentrowtop = $(".mainWrap div.row:first-child").css( "margin-top");
        currentrowtop = parseInt(currentrowtop)-rowheight;
        var rowtop = currentrowtop+="px";
        $(".mainWrap div.row:first-child").css( "margin-top", rowtop );
      }
      current_col++;
    }
  }

在这种情况下，当我按下从第1块到第7块的向下箭头按钮时，如果按下向上箭头按钮，则块将不会向上移动到保持打开的位置。当我在块7之后按下向下箭头按钮时，如果我按向上箭头按钮然后按向下箭头按钮，则块将向上移动。与其他块相同的事情。我希望块只有在块隐藏的块结束后我才会向上移动，例如：我在块7上，而块7之后的其他块正在隐藏所以我可以把它们移动起来。当我不在块的末尾时，我不想移动块。

当其他块隐藏时，我不知道如何阻止块向上移动吗？

如果您需要查看，请访问我的示例网站：http://jsfiddle.net/VZWNE/6/

Answer 1

试试这个小提琴：http://jsfiddle.net/whitehat101/VZWNE/10/

在第51行，我添加了一个if语句：

if(current_col > displayrowcount){
    $(".mainWrap div.row:first-child").css( "margin-top", "+="+rowheight);
}

我也改变了一些其他的东西，但他们不是关于你的问题。可读性，真正做出代码...

坦率地说，很多代码都表明对js基本原理缺乏了解。代码中充斥着parseInt()，大部分时间都是完全没必要的。

例如，这让我在内心死了一点：

for(var i=1; i<=(parseInt(current_row)+parseInt(1)); i++ )
// current_row is already an int...
for(var i=1; i<=current_row+1; i++ )

更糟糕的是，使用那个可怕的代码是在一个破碎的代码块中。在整个代码中，您使用current_col来保存当前行。而且我猜测current_row实际上反映了当前的列。

$(".mainWrap div.row:first-child")在您的代码中出现六次。

对于这个代码块......

if(current_col > 1 && current_row == 1)
{
  var currentrowtop = $(".mainWrap div.row:first-child").css( "margin-top");   
  var calcuatedrowtop = -(current_col*rowheight);
  currentrowtop = parseInt(currentrowtop)-rowheight;

  if((currentrowtop - calcuatedrowtop) < rowheight)
  {
 currentrowtop = parseInt(currentrowtop)+rowheight;
 currentrowtop = parseInt(currentrowtop)+rowheight;
 var rowtop = currentrowtop+="px";
 $(".mainWrap div.row:first-child").css( "margin-top", rowtop );            
  }
//...
}

我甚至无法想象用不太清晰的方式编写该代码。

在其范围内的任何其他地方都没有本地currentrowtop。您减去rowheight，然后在if中添加，两次，然后使用它，但如果您的if从未处理过，则从不使用减去的currentrowtop 。最后，var rowtop = currentrowtop+="px";我甚至都不知道该说些什么。您了解+=运算符的作用吗？

在开始这样的项目之前，我会认真花时间研究你的JavaScript / jQuery基础知识。

祝你好运。

如何使用键盘控制div类块

1 个答案: