오류: 다른 요소(element)도 같이 선택되는 문제

의도한 바

내용의 이해를 위해 같은 것을 제이쿼리와 자바스크립트로 짜 보았음.
구현하고자 하는 것은 화면프레임을 동적으로 분할 및 통합 구성하는 것. (이 글은 디바이스 기반 반응형 이야기 아님)
사이드 바를 제외한 센터 패널을 통으로 하나, 가로반반, 세로반반으로 프레임을 나눠보고
프레임을 나눴을 때 각 패널의 위치를 특정 메뉴를 누를 때마다 전환도 하는 것이었음 (1을 2의 위치로 2를 1의 위치로)

 

문제의 코드

html

<div class="col" id="centerPanel">
  <div class="cp row w-100 h-100" id="defaultShow">
  	<div class="col" id="cp1"><p>1번 패널</p></div>
  <div class="col" id="cp2"><p>2번 패널</p></div>
  </div>
  <div class="cp row" id="fullShow">
  	<div class="col" id="cp1"><p>1번 패널</p></div>
  </div>
  <div class="cp row" id="horizonShow">
  	<div class="col h-50" id="cp1"><p>1번 패널</p></div>
  	<div class="col h-50" id="cp2"><p>2번 패널</p></div>
  </div>
</div>

 

javascript

var fullShow = $("#fullShow").hide();
var horizonShow = $("#horizonShow").hide();
var mul = $("#horizonShow, #fullShow, #defaultShow").hide();
var submenu = $("#leftPanel").show();
var defaultShow = $("#defaultShow").show();
var count = 0;

//쓰지 않는 다른 요소가 display:none임에도 불구하고 선택되는 문제
function crossClick() {
	count++;
	var a = document.getElementById("cp1");
	var b = document.getElementById("cp2");

	if (count % 2 == 1) {
		b.parentNode.insertBefore(a, b.nextSibling);
	} else {
		b.parentNode.insertBefore(a, b);
	}
}

 

원인 > id는 말 그대로 고유값이고 class가 좀 유한 편인데 
본 특성과 다르게 겹쳐서 여러 개를 만들다보니 아래 horizonShow의 cp1를 선택하고 싶은데
다른 id 아래의 (순서대로 읽으니까 가장 위의) cp1이 선택됨

해결 > active된 자식...이런 식으로 동적으로 할당하면 될 것 같은데 짬이 안되서
defaultShow를 눌렀을 때는 defaultShow의 cp1 이런식으로 할당함

 

jquery

var count = 0;
        var actPn1 = $(".active > #cp1");
        var actPn2 = $(".active > #cp2");
        $("#crossContent").click(function() {
          count++;
          if (defaultShow.is(":visible")) {
            if (count % 2 == 1) {
              $("#cp2").after($("#cp1"));
            } else {
              $("#cp2").before($("#cp1"));
            }
          } else if (horizonShow.is(":visible")) {
            mul.hide();
            horizonShow.show();
            if (count % 2 == 1) {
              actPn1.css("top", "50%");
              actPn2.css("top", "0%");
            } else {
              actPn2.css("top", "50%");
              actPn1.css("top", "0%");
            }
          } else {
            alert("전환할 창이 없습니다.");
          }
          //return false;
        });

 

결과 > 동작은 잘됨