두 개 이상의 다른 요소를 클릭 한 후 요소 표시

Question

다른 요소가 있고이를 클릭 한 후 선을 연결하려고합니다. 문제는 각 요소가 다른 여러 요소와 연결될 수 있으므로 각 요소를 결합 할 수있는 가능성이 여러 가지입니다. 즉, 연결하려는 모든 요소를 ​​클릭해야한다는 것입니다.

예 : #button1 및 #button2을 클릭하면 그 사이에 줄이 나타납니다. 지금 #button3을 클릭하면 #button2과 #button3 사이의 줄이 첫 줄에 표시됩니다. (선은 단추를 클릭 한 후 표시해야하는 이미지입니다).

두 개 이상의 요소를 클릭 한 후 이벤트를 트리거 할 수있는 솔루션을 찾을 수 없습니다. 누군가가 나를 도울 수 있기를 바랍니다!

#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

같은 것을보십시오. 당신이 당신의 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

을 incluse 것을 기억 다음 코드를 사용해보십시오 :

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>