Zeige ein Element nach dem Klicken auf zwei oder mehr verschiedene Elemente

Question

Ich habe verschiedene Elemente und möchte sie mit den Linien verbinden, nachdem ich sie angeklickt habe. Das Problem ist, dass jedes Element mit mehreren anderen Elementen verbunden werden kann. Es gibt also mehr als eine Möglichkeit, jedes Element zu kombinieren, dh ich muss auf alle Elemente klicken, die ich verbinden möchte, um die Linien dazwischen zu zeigen.

Beispiel: Wenn Sie auf #button1 und #button2 klicken, wird eine Linie zwischen ihnen angezeigt. Wenn Sie jetzt #button3 klicken, würde eine Zeile zwischen #button2 und #button3 zusätzlich zur ersten Zeile angezeigt werden. (Die Zeilen sind Bilder, die nach dem Klicken auf die Schaltflächen angezeigt werden sollen).

Ich konnte keine Lösungen finden, wo Sie ein Ereignis auslösen können, nachdem Sie zwei oder mehr Elemente geklickt haben. Hoffe jemand kann mir helfen!

#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; 
 
}

<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>

Answer 1

so etwas wie dies versuchen. Denken Sie daran, dass Sie Ihre js

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; 
 
    } 
 
});

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

 

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

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

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

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

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

<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>

Answer 2

Versuchen Sie es mit folgenden Code incluse sollte:

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; 
    } 

}); 

Es wäre besser, wenn Sie Ihren Code in jsfiddle hinzufügen.

Answer 3

Man könnte so etwas wie dies versuchen:

$(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>