jquery - 画一条线连接两个点击的 div 列

Question

我想要实现一个功能，我可以在点击事件中将 2 个 div 与一条线连接起来。这个概念是关于在 2 个不同的列中匹配内容，如下所示。请帮助我，因为我已经尽我所能，因为我不想使用任何外部或 HTML5 Canvas 。是否可以仅使用 jquery、css 和 html 来实现。请回复。谢谢。

Answer 1

我可能有一个由三行组成的行的潜在想法 - 水平(来自元素)，垂直(向上或向下)和水平(到另一个元素)。您可以创建 2 个非常小的列，在 A 列和 B 列之间没有边框，然后使用 jquery .css 将相应的边框添加到正确的列和行中。

如果您希望对线条进行动画处理，您可以创建初始大小为 0 的 div，然后对列的大小进行动画处理以便出现边框。

这是一个基本的 fidde:http://jsfiddle.net/3xPpc/ HTML:

  <div class="big-col">
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
</div>
<div class="small-col">
    <div id="row-1-left" class="small-row"></div>
    <div id="row-2-left" class="small-row"></div>
    <div id="row-3-left" class="small-row"></div>
    <div id="row-4-left" class="small-row"></div>
    <div id="row-5-left" class="small-row"></div>
    <div id="row-6-left" class="small-row"></div>
    <div id="row-7-left" class="small-row"></div>
    <div id="row-8-left" class="small-row"></div>
</div>
<div class="small-col">
    <div id="row-1-right" class="small-row"></div>
    <div id="row-2-right" class="small-row"></div>
    <div id="row-3-right" class="small-row"></div>
    <div id="row-4-right" class="small-row"></div>
    <div id="row-5-right" class="small-row"></div>
    <div id="row-6-right" class="small-row"></div>
    <div id="row-7-right" class="small-row"></div>
    <div id="row-8-right" class="small-row"></div>
</div>
<div class="big-col">
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
    <div class="big-row blue"></div>
    <div class="big-row green"></div>
</div>

CSS: .big-col { 向左飘浮;

.small-col {
float: left;
}

.big-row {
width: 200px;
height: 100px;     
}

.blue {
background-color: blue;
}

.green {
background-color: green;
}

.small-row {
width: 40px;
height: 50px;     
}

#row-1-left {
border-bottom: 1px solid orange;
}

#row-5-right {
border-bottom: 1px solid orange;
}

#row-2-right, #row-3-right, #row-4-right, #row-5-right {
border-left: 1px solid orange;
}

您所要做的就是使用 jQuery 添加点击边框。