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
수정 아이콘
상세한 답변 감사합니다 :)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
175786 [질문] 초등 여아 접이식 자전거 어떤가요? [3] 눈팅만일년5462 24/04/15 5462
175785 [질문] 지금 펨코와 일베랑 상관 없나요? [51] pecotek8010 24/04/15 8010
175784 [질문] 갤럭시 S24 + , S24 U 고민이네요. [12] SlamMarine5829 24/04/15 5829
175783 [질문] 셀프 상속진행해보신분 계실까요? [4] SG워너비5447 24/04/15 5447
175782 [질문] 차량 교체주기가 어떻게되세요? [39] 날아가고 싶어.6334 24/04/15 6334
175781 [질문] 미국 역사상 최악의 사회 혼란+암흑기는 뭐라고 생각하시나요? [11] 보리야밥먹자5176 24/04/15 5176
175780 [질문] 애기 이름을 영어식으로 짓고 싶습니다. [47] 카즈하7713 24/04/15 7713
175779 [질문] 핸드폰 발열이 많이 있을때 냉동실에 넣어도 괜찮나요 [9] 뵈미우스6610 24/04/15 6610
175778 [질문] 첫 중고차 구매 자동차보험 관련 질문드립니다. [3] 7105690 24/04/15 5690
175777 [질문] 편찮으신 장모님 모시고 갈 식당 추천 부탁드려요(서울 근처) [14] 수지짜응6493 24/04/15 6493
175776 [질문] 자동차보험 제 명의 내에서 차량 변경 질문입니다 [2] 매즈미켈슨6695 24/04/15 6695
175775 [질문] 라이트파이낸스 사기인가요? [21] 교자만두6561 24/04/15 6561
175774 [질문] 이 나무 이름이 뭘까요? [4] workbee5558 24/04/15 5558
175773 [질문] 5세 여아와 오사카여행 [15] 링크7352 24/04/15 7352
175772 [질문] JBL 1300이라는 사운드바 연결 질문입니다. [1] 아타락시아16476 24/04/15 6476
175770 [질문] 맥 OS용 이미지 뷰어 프로그램 문의 [9] 한국화약주식회사5340 24/04/14 5340
175769 [질문] 아이폰에 있는 음악파일 접근 가능한가요 [3] egernya6619 24/04/14 6619
175768 [질문] [디아3] 혹시 시즌 하시는분 계신가요 [2] Scour6067 24/04/14 6067
175767 [질문] 편한 운동화나 신발 추천좀 부탁드립니다 [17] 같이걸을까6641 24/04/14 6641
175766 [질문] 5월초 일본 휴양 여행 어디가 좋을까요? [17] 회전목마6708 24/04/14 6708
175764 [질문] 감기가 올 것 같은 느낌입니다. 어떻게 해야 할까요 ㅜㅜ [12] 엔지니어5970 24/04/14 5970
175763 [질문] 초등학생과 같이 볼만한 OTT 영화 추천부탁드립니다. [10] 유니꽃7423 24/04/14 7423
175762 [질문] 내일 LCK 결승전 시작시간 [6] 마인부우6713 24/04/14 6713
목록 이전 다음
댓글

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