当点击TD元素时，为2个单元格的宽度和3个单元格的高度上色

Color 2 cells width and 3 cells height when clinking on a TD element

本文关键字：单元格 3个 高度 2个 TD 元素      更新时间：2023-09-26

我正在寻找一种方法来制作网格(目前使用表，但很快在div)。假设我点击第一个单元格(x,y = 1，-1)，我想让背景颜色改变2个单元格的宽度和3个单元格的高度。(共改变6个细胞)…

如果使用div更容易，那就继续…请使用jQuery !:)

我真的不知道如何做到这一点，如果有人能把我的路径或给我一个代码应该做到这一点…或者更好的是，一个教程XD…

我真的很感激你的帮助，万分感谢

编辑:

我在这里要做的实际上是一个不可见的网格，使系统可以与rts类游戏相媲美，其中建筑是透明的，跟随鼠标，但当你移动时它附着在网格上，点击建筑物就会掉落(不透明)……解释一下，这样你就有视觉效果了

div(因为它是长期目标):

首先，我做了一个小标记，就像一个表格。

html是:

<div id="overall">
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>   
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>       
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>    
    </div>   
</div>

使用以下css:

.row{
    height:25px;
}
.cell{
    width:25px;
    height:100%;
    display:inline-block;
    border:1px solid black;
}

它有一个类似表格的显示(它是一堆由单元格组成的行，同一列中的单元格共享一个类)。

要做你想做的，看起来你需要将一个点击函数关联到每个.cell。

这样做很容易，使用$(".cell").click(function(){});

现在，是完成函数的时候了。

现在，下一步是为需要上色的单元格上色。为了添加颜色，我们将使用一个特殊的类(这样我们可以轻松地更改更多内容):

.clickedCell{
    background:red;
}

最难的部分是选择6个单元格。可以使用多种方法(例如，我们可以有一个像A1, A2, B1, B2这样的id网格，并使用id选择它们)，效率/设计在很大程度上取决于你将为你的div设置的标记。

我的做法如下:

  • 检索单元格列的类:

    var cl=$(this).attr("class");
var col="."+/col'd/.exec(cl)[0];

  • 检索当前div的父元素var parent=$(this).parent();

  • 创建一个包含当前栏中3个单元格的jQuery对象:

    listOfCell=$(this);
listOfCell=listOfCell.add(parent.next().children(col));
listOfCell=listOfCell.add(parent.prev().children(col));

    注意add函数返回一个新的集合，因此我们需要赋值返回值

  • 为该对象添加下3个单元格listOfCell=listOfCell.add(listOfCell.next());

  • 添加类listOfCell.addClass("clickedCell");

一切都结束了:)

这里有一个工作示例:http://jsfiddle.net/KZFzd/1/

注意:

  • 如前所述，该功能在很大程度上取决于所使用的标记。
  • 示例不处理先前选择的单元格的删除。这很容易，留给读者作为练习。
  • 它不处理侧边单元格的特殊情况，它只是改变单元格的背景，如果网格更大则会改变。这种情况留给读者作为练习。
  • 它不检查下一个/上一个父对象的存在，因为jQuery返回一个空的jQuery对象当没有匹配，因此，方法可以调用它，即使它没有效果。
  • 这个例子可以通过多种方式进行压缩，但是为了可读性的考虑，我们还是保持原样。

希望对你有帮助。

编辑:

为了回答您的评论，新提琴处理指定大小:http://jsfiddle.net/KZFzd/3/

我添加了两个输入，让您指定大小。您可能需要在您的代码中更改:)。

我还添加了类移除来清理显示。

所以两个主要的变化是，现在，我们使用两个for循环来添加单元格。点击的单元格位于矩形的左上角。

  • 第一个:

    for (i=1;i<y;i++){
   listOfCell=listOfCell.add(par.children(col));
   par=par.next();
}

    它只是从一个父元素迭代到另一个父元素以达到所需的高度。(并且第一个父赋值现在直接是下一个。par=$(this).parent().next()

  • 第二个:

    for (i=1;i<x;i++){
    listOfCell=listOfCell.add(listOfCell.next());
}

    它只是迭代添加下一个元素以达到所需的宽度。

注意:

  • 我们使用的事实是，没有双在jQuery列表的宽度。
  • 我们从1开始迭代，而不是0，因为我们的起始listOfCell已经是1*1单元格
  • 你可以很容易地从其他角落开始，如果你改变使用next()到prev()在一个循环或/和其他。
  • 仍然不处理侧例。
相关文章：