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
수정 아이콘
상세한 답변 감사합니다 :)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
176091 [질문] 야구 사인훔치기 어떻게 생각하시나요? [11] 영길2535 24/05/06 2535
176090 [질문] 닌텐도 e숍에서 게임 선물 안되나요? [2] 인왕1652 24/05/06 1652
176089 [삭제예정] 자식이 죽을 경우 상주가 누가 되나요? [4] 삭제됨2761 24/05/06 2761
176088 [질문] [LOL] 원래 원딜이 피지컬적인 재능이 많이 요구 되나요? [11] jip2301 24/05/06 2301
176087 [삭제예정] 파이썬으로 구글 tts 사용 시 에러 (간단, 파일입출력 관련) [2] 삭제됨1579 24/05/06 1579
176086 [질문] 55인치 티비 추천부탁드립니다. Dončić1821 24/05/06 1821
176085 [질문] 교촌도 매장 별로 맛 차이가 심한가요? [25] Carliot3464 24/05/06 3464
176084 [질문] 롤 한 시즌만에 떡락한 건 뭐 때문일까요? [12] 호비브라운4183 24/05/06 4183
176083 [질문] 이 컴퓨터 사양 가격 적당한가요? [24] 며칠입니다.3754 24/05/05 3754
176082 [질문] 핸드폰 바꿀 때 기존 자료 쉽게 옮기는 방법이 있으신지요..? [9] nexon3461 24/05/05 3461
176081 [질문] 티셔츠를 찾습니다 [4] 흔들리지않아2917 24/05/05 2917
176080 [질문] 마라톤,러닝용 선글라스 [10] 앵글로색슨족2844 24/05/05 2844
176079 [질문] 어머니 신용카드 고민이네요 추천부탁드립니다 [1] Liberal2312 24/05/05 2312
176078 [질문] 저가형이나 구형 로봇청소기 괜찮을까요? [4] 사람되고싶다2084 24/05/05 2084
176077 [질문] 전입신고불가 월세 [34] 좋습니다4321 24/05/05 4321
176076 [질문] 저같은 배변 패턴이신분 계신가요 [6] 스핔스핔3198 24/05/05 3198
176075 [질문] 영어 스픽 프리미엄 플러스 사용해보신 분 있으실까요? [1] 달콤한인생2600 24/05/05 2600
176074 [질문] 아마존(기업) 관련 서적 하나 추천해주세요 [1] 연애잘합니다2754 24/05/05 2754
176073 [질문] 창문을 열고 바닥을 닦으면 요새 초록색 가루? 같은게 들어오는데.. [7] LG의심장박용택3868 24/05/04 3868
176072 [질문] 부울경에 외국인선물로 전통선물 살곳 있을까요?? [4] 하얀샤프란2863 24/05/04 2863
176071 [질문] 페인트칠 잘아시는 분들께 질문 드립니다. [3] 개인의선택2741 24/05/04 2741
176070 [질문] 바쇼에 참석한 부스 관련 위스키 질문 [4] 깐딩2711 24/05/04 2711
176069 [질문] 전원 어댑터 규격 맞는지 봐주실 분 [5] 앗흥2147 24/05/04 2147
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
맨 위로