单击两个或多个不同的元素后显示一个元素

Question

我有不同的元素，想要点击它们之后用线连接它们。问题是每个元素都可以与其他几个元素连接，因此组合每个元素有多种可能性，这意味着我必须单击我想要连接的所有元素来显示它们之间的线。

例如：当您点击#button1和#button2时，他们之间会出现一条线。现在点击#button3时，#button2和#button3之间的一行会显示在第一行之外。 （这些线是单击按钮后应显示的图像）。

我找不到任何可以在点击两个或更多元素后触发事件的解决方案。希望有人可以帮助我！

＆＃13;

＆＃13;

#button1 {
  border: #000000 solid;
  width: 100px;
  float: left;
}
#button2 {
  border: #000000 solid;
  width: 100px;
  margin-left: 300px;
}
#button3 {
  border: #000000 solid;
  width: 100px;
  margin-top: 175px;
  margin-left: 0px;
  float: left;
}
#button4 {
  border: #000000 solid;
  width: 100px;
  margin-top: 175px;
  margin-left: 300px;
}
#line12 {
  margin-left: 55px;
  margin-top: 17.5px;
  position: absolute;
  visibility: hidden;
}
#line24 {
  margin-left: 350px;
  margin-top: 33px;
  position: absolute;
  visibility: hidden;
}
#line14 {
  margin-left: 50px;
  margin-top: 33px;
  position: absolute;
  visibility: hidden;
}
#line13 {
  margin-left: 50px;
  margin-top: 33px;
  position: absolute;
  visibility: hidden;
}
#line32 {
  margin-left: 50px;
  margin-top: 33px;
  position: absolute;
  visibility: hidden;
}

＆＃13;

<div id="line12">
  <img src="img/line12.png">
</div>
<div id="line14">
  <img src="img/line14.png">
</div>
<div id="line24">
  <img src="img/line24.png">
</div>
<div id="line13">
  <img src="img/line13.png">
</div>
<div id="line32">
  <img src="img/line32.png">
</div>

<div id="button1">show lines 1</div>
<div id="button2">show lines 2</div>
<div id="button3">show lines 3</div>
<div id="button4">show lines 4</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试这样的事情。请记住，你应该包括你的js

＆＃13;

＆＃13;

var firstEl = -1;
$("#button1").on("click",function(){
  if (firstEl == -1){
    firstEl = 1;
    } else {
      $("line" + firstEl + "1").show();
      console.log("show " + "line" + firstEl + "1");
      firstEl = -1;
    }
});

$("#button2").on("click",function(){
  if (firstEl == -1){
    firstEl = 2;
    } else {
      $("line" + firstEl + "2").show();
      console.log("show " + "line" + firstEl + "2");
      firstEl = -1;
    }
});

$("#button3").on("click",function(){
  if (firstEl == -1){
    firstEl = 3;
    } else {
      $("line" + firstEl + "3").show();
      console.log("show " + "line" + firstEl + "3");
      firstEl = -1;
    }
});

$("#button4").on("click",function(){
  if (firstEl == -1){
    firstEl = 4;
    } else {
      $("line" + firstEl + "4").show();
      console.log("show " + "line" + firstEl + "4");
      firstEl = -1;
    }
});

＆＃13;

#button1{
	border:#000000 solid;
	width:100px;
	float:left;
	}
	
#button2{
	border:#000000 solid;
	width:100px;
	margin-left:300px;}
	
#button3{
	border:#000000 solid;
	width:100px;
	margin-top:175px;
	margin-left:0px;
	float:left;}
	
#button4{
	border:#000000 solid;
	width:100px;
	margin-top:175px;
	margin-left:300px;
	}


#line12 {
	margin-left:55px; 
	margin-top:17.5px; 
	position:absolute;
	visibility:hidden;
}

#line24 {
	margin-left: 350px; 
	margin-top:33px; 
	position:absolute;
	visibility:hidden;
}

#line14 {
	margin-left: 50px; 
	margin-top:33px; 
	position:absolute;
	visibility:hidden;
}

#line13 {
	margin-left: 50px; 
	margin-top:33px; 
	position:absolute;
	visibility:hidden;
}

#line32 {
	margin-left: 50px; 
	margin-top:33px; 
	position:absolute;
	visibility:hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="line12"><img src="img/line12.png"></div>
<div id="line14"><img src="img/line14.png"></div>
<div id="line24"><img src="img/line24.png"></div>
<div id="line13"><img src="img/line13.png"></div>
<div id="line32"><img src="img/line32.png"></div>

<div id="button1">show lines 1</div>
<div id="button2">show lines 2</div>
<div id="button3">show lines 3</div>
<div id="button4">show lines 4</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用以下代码：

HTML：

<div id="line12" class="line-image-container">
  <img src="img/line12.png">
</div>
<div id="line14" class="line-image-container">
  <img src="img/line14.png">
</div>
<div id="line24" class="line-image-container">
  <img src="img/line24.png">
</div>
<div id="line13" class="line-image-container">
  <img src="img/line13.png">
</div>
<div id="line32" class="line-image-container">
  <img src="img/line32.png">
</div>

<div id="button1" data-line-no="1">show lines 1</div>
<div id="button2" data-line-no="2">show lines 2</div>
<div id="button3" data-line-no="3">show lines 3</div>
<div id="button4" data-line-no="4">show lines 4</div>

jQuery：

var i=0;
var line_obj = array();
$('button').on('click', function() {
    $('.line-image-container').css('visibility', 'hidden');
    if(i<=2) {
        var line = $(this).attr('data-line-no');
        line_obj.push(line);
        i++;
    }

    if(i == 2) {
        $('#line'+line_obj[0]+line_obj[1]).css('visibility', 'visible');
        i = 0;
    }

});

如果你在jsfiddle中添加你的代码会更好。

Answer 3

您可以尝试这样的事情：

$(function() {
  var buttonClicks = [];
  $(".test").click(function(e) {
    var btnId = $(e.target).attr('id');
    // make sure the same button wasnt clicked twice
    if (buttonClicks[0] === btnId) 
      return;
    buttonClicks.push(btnId);
    if (buttonClicks.length === 2) { // 2 buttons clicked      
      // put your line drawing logic here
      console.log("Show line between " + buttonClicks[0] + " and " + buttonClicks[1]);
      buttonClicks = []; // reset button clicks
    }
  });
});

.test {
  cursor: pointer;
}
#button1 {
  border: #000000 solid;
  width: 100px;
  float: left;
}
#button2 {
  border: #000000 solid;
  width: 100px;
  margin-left: 300px;
}
#button3 {
  border: #000000 solid;
  width: 100px;
  margin-top: 175px;
  margin-left: 0px;
  float: left;
}
#button4 {
  border: #000000 solid;
  width: 100px;
  margin-top: 175px;
  margin-left: 300px;
}
#line12 {
  margin-left: 55px;
  margin-top: 17.5px;
  position: absolute;
  visibility: hidden;
}
#line24 {
  margin-left: 350px;
  margin-top: 33px;
  position: absolute;
  visibility: hidden;
}
#line14 {
  margin-left: 50px;
  margin-top: 33px;
  position: absolute;
  visibility: hidden;
}
#line13 {
  margin-left: 50px;
  margin-top: 33px;
  position: absolute;
  visibility: hidden;
}
#line32 {
  margin-left: 50px;
  margin-top: 33px;
  position: absolute;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="line12">
  <img src="img/line12.png">
</div>
<div id="line14">
  <img src="img/line14.png">
</div>
<div id="line24">
  <img src="img/line24.png">
</div>
<div id="line13">
  <img src="img/line13.png">
</div>
<div id="line32">
  <img src="img/line32.png">
</div>

<div class="test" id="button1">show lines 1</div>
<div class="test" id="button2">show lines 2</div>
<div class="test" id="button3">show lines 3</div>
<div class="test" id="button4">show lines 4</div>