1

我正在研究块的 div 类，以使用键盘向上和向下箭头按钮来控制它们。我有一个块列表，其中有 7 个块显示，而其他块隐藏。我有从块 1 到块 17 的块文本。当我按下从块 1 到块 17 的向下箭头按钮时，块将使用“rowheight”向上移动，看起来不错，但是有一个问题。当我在块 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/

4

1 回答 1

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 基础知识。

祝你好运。

于 2013-09-27T04:18:38.937 回答