PGR21.com
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)
Date 2024/04/08 14:56:20
Name Mindow
Subject [질문] 자바스크립트, 제이쿼리 고수 개발자분들께 질문드립니다 (수정됨)
자바스크립트, 제이쿼리 고수 개발자분들께 질문드립니다

제가 하려는 질문은 제이쿼리 기반의 질문이긴 하지만 자바스크립트만 잘 아셔도 잘 아시지 않을까 싶습니다!
1차원적으로 간단하게 노가다식으로 짜면 그렇게 어렵지 않지만 고급응용으로 짜보려 하니 너무 어렵네요


[질문의 요지]
html의 클래스명 (개발에서의 클래스가 아닌 css나 제이쿼리 선택자로 쓰이는 그 class)에 포함된 접두사나 접미사 같은 걸
string으로 추출해서 다른 element 의 클래스의 접두사, 접미사로 활용하기를 어떻게 해야할지 궁금합니다.
위 설명만 보면 헷갈릴 수도 있으니 예제로...
pgr 에디터는 꺽쇠 입력이 안 되므로 [ 와 ]로 대체하겠습니다 ^^;;


----------------------------------------------------

원하는 기능:
버튼을 마우스오버하면 다른 div에 그 버튼 클래스와 상응하는 멀티클래스로 들어갑니다


[div class="map"]
[button class="btn-abab"]ABAB[/button]
[button class="btn-dcdc"]DCDC[/button]
[button class="btn-fafa"]FAFA[/button]
[/div]

----1차원적인 Script----
$(".map").addClass("bg-abab"); // 페이지 로드시 호출
$(".map [class*='btn-']").each(function(){
                        let btn = $(this);
                        btn.mouseenter(function(){
                                btn.parent(".map").removeClass("bg-abab bg-dcdc bg-fafa");
                                if(btn.hasClass("btn-abab")){
                                        btn.parent(".map").addClass("bg-abab");
                                };
                                if(btn.hasClass("btn-dcdc")){
                                        btn.parent(".map").addClass("bg-dcdc");
                                };
                                if(btn.hasClass("btn-fafa")){
                                        btn.parent(".map").addClass("bg-fafa");
                                };
                        });
                });

----만약에 버튼 갯수가 너무 많거나 클래스명이 유동적이여서 1차원적으로 짜면 안 될때는..?----
$(".map").addClass("bg-abab"); // 페이지 로드시 호출
$(".map [class*='btn-']").each(function(){
                        let btn = $(this);
                        btn.mouseenter(function(){
                                // 어떻게..?
                        });
                });

통합규정 1.3 이용안내 인용

"Pgr은 '명문화된 삭제규정'이 반드시 필요하지 않은 분을 환영합니다.
법 없이도 사는 사람, 남에게 상처를 주지 않으면서 같이 이야기 나눌 수 있는 분이면 좋겠습니다."
안군시대
24/04/08 15:22
수정 아이콘
질문의 요지를 잘 모르겠는데요;; 접두사나 접미사를 분리할때는, 자바스크립트 스트링의 slice나 split 함수 등을 이용해서 분리해내시면 될듯 합니다.
예를 들어 "btn-aaa", "btn-bbb" 등에서 btn만 찾아내고 싶다면,

var className = [해당 element의 클래스명];
var prefix = className.split("-")[0]; // prefix = "btn"

이런 식으로 합니다. 자세한건 MDN등을 찾아서 javascript string의 메소드들을 찾아보세요.
24/04/08 15:28
수정 아이콘
답변 감사합니다~!
24/04/08 15:35
수정 아이콘
let btnClass = $(this).prop("class");

btn.mouseenter(function(){
btn.parent(".map").prop("class", btnClass );
});

하면 끝이지 않을까요?!
24/04/08 17:32
수정 아이콘
질문하신 내용을 바탕으로, 버튼의 클래스명에서 특정 접두사나 접미사를 추출하여 다른 요소의 클래스로 활용하는 고급적인 방법을 제공해드리겠습니다. 이는 유연하고 확장 가능한 코드를 작성하는 데 도움이 됩니다.

이를 위해, 버튼 클래스명에서 접두사 "btn-" 뒤에 오는 문자열을 추출하고, 해당 문자열을 이용해 동적으로 "map" 클래스에 "bg-" 접두사와 함께 추가할 것입니다. 아래는 이 과정을 구현한 코드 예제입니다.

javascript
Copy code
$(function() {
// 페이지 로드 시 기본적으로 첫 번째 버튼에 해당하는 배경 클래스 추가
let initialClass = $('.map button[class*="btn-"]').first().attr('class').match(/btn-(w+)/)[1];
$('.map').addClass('bg-' + initialClass);

// 모든 버튼에 대해 이벤트 리스너 추가
$('.map button[class*="btn-"]').mouseenter(function() {
// 현재 버튼의 클래스에서 'btn-' 다음 오는 문자열 추출
let suffix = $(this).attr('class').match(/btn-(w+)/)[1];
// 'map' 요소에서 모든 'bg-' 접두사가 붙은 클래스 제거
$('.map').removeClass(function(index, className) {
return (className.match(/(s|^)bg-w+/g) || []).join(' ');
});
// 추출한 접미사를 이용해 새로운 클래스 추가
$('.map').addClass('bg-' + suffix);
});
});
이 코드는 다음과 같이 작동합니다:

페이지가 로드될 때, 첫 번째 버튼에 해당하는 배경 클래스를 "map" div에 추가합니다. 이를 통해 초기 상태에서도 관련 배경이 보여지도록 합니다.
각 버튼에 마우스를 올렸을 때, 해당 버튼의 클래스명에서 "btn-" 접두사 다음에 오는 문자열(접미사)을 추출합니다.
"map" div에서 모든 "bg-"로 시작하는 클래스를 제거합니다. 이는 removeClass 함수 내에서 정규식을 사용하여 이루어집니다.
추출한 접미사를 "bg-" 접두사와 결합하여 새로운 클래스를 "map" div에 추가합니다.
이 방법을 사용하면, 버튼의 클래스명이 얼마나 많거나 변동적이든 상관없이 코드를 수정하지 않고도 동적으로 배경 클래스를 변경할 수 있습니다. 이는 유지 보수를 쉽게 하고, 확장성 있는 코드를 작성하는 데 매우 유용합니다.
24/04/17 09:35
수정 아이콘
상세한 답변 감사합니다 :)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
176135 [질문] 네이버가 라인재팬 지분을 쿠팡과 교환하면 득일까요? 실일까요? [8] VictoryFood7293 24/05/08 7293
176134 [질문] 올해 소멸예정인 항공사 마일리지는 어디 쓰는게 이득인가요? [4] 같이걸을까6577 24/05/08 6577
176132 [질문] 해외 여행시, 카드가 낫나요? 환전해가는게 낫나요? [10] LG의심장박용택6534 24/05/08 6534
176131 [질문] 발치 치아교정 질문드립니다 [17] 이오르다체6633 24/05/08 6633
176130 [질문] 단톡방에 바람 피는거 올리는 심리는 뭘까요? [40] 박수11003 24/05/08 11003
176129 [질문] 태블릿을 보조모니터로 쓰면 성능나쁠까요? [12] 스물다섯대째뺨7235 24/05/08 7235
176128 [질문] 핼로우톡 언어교환 해보신분에게 질문 [5] 유지태.6021 24/05/08 6021
176127 [질문] 인도-태평양 지역에 유럽의 해군력 투사가 가능한가요? [4] Garnett216874 24/05/08 6874
176126 [질문] 여러분들이 지금껏 본 최고의 반전 작품이 무엇인가요? [49] 라리8378 24/05/08 8378
176125 [질문] FC24 게임 질문(위닝 마스터리그 같은 플레이모드가 있는지) [6] Everlas6913 24/05/08 6913
176124 [질문] [헬스] 스쿼트, 데드 중량에 대한 질문 [18] 시무룩6200 24/05/08 6200
176123 [질문] 최근 기브온 많이 듣고 있습니다. [1] 임작가5452 24/05/08 5452
176122 [질문] 살림 선배님들 건조기 고민입니다 [10] 골드쉽6561 24/05/08 6561
176121 [질문] 너무 짙은 전면유리 썬팅 제거해야 할까요? [25] VictoryFood8482 24/05/08 8482
176119 [질문] 어버이날 시즌에 양가 모두 방문하시나요? [14] 합격기원6143 24/05/07 6143
176118 [질문] 컴퓨터 본체 팬 소음 때문에 조언을 구합니다. [18] 보로미어7133 24/05/07 7133
176117 [질문] (스타1) 아프리카판 커리어 현역때와 비교하면 어느정도로 쳐줄 수 있을까요? [25] pecotek6964 24/05/07 6964
176116 [질문] 아파트 관리사무소 보험 처리 관련 문의 수타군4883 24/05/07 4883
176115 [삭제예정] 등기 질문 드립니다 [2] 삭제됨5059 24/05/07 5059
176113 [삭제예정] 기업에서 임금을 줬다가 일부 다시 반환받았는데, 법적으로 문제가 없을까요? [6] 삭제됨6263 24/05/07 6263
176112 [질문] 가사도우미 믿고 맏길 업체 어떻게 찾나요? [16] 맨발6244 24/05/07 6244
176111 [질문] 자동차 구매시 조언 부탁드립니다. [10] 율리우스 카이사르7125 24/05/07 7125
176109 [질문] [게임] 하데스 PC? 콘솔? 어떠셨나요? [6] Secundo7188 24/05/07 7188
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기