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
수정 아이콘
상세한 답변 감사합니다 :)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
176053 [질문] 거제 외도 주변관광 [2] 어...5359 24/05/03 5359
176052 [질문] 백화점 가전매장 다량구매 질문 있습니다. [8] 스토리북5960 24/05/03 5960
176051 [질문] [게임][블루 아카이브] 캐릭뽑기에서 이렇게 나왔는데, 진행해도 될까요? [6] 카페알파6754 24/05/03 6754
176050 [질문] 환갑 부모님과 여행지 선택 도움 부탁드립니다. 다낭vs그외 [15] 김보노7299 24/05/02 7299
176049 [질문] 하이브가 언론 플레이를 할 이유가 있었을까요? [18] 니체7518 24/05/02 7518
176048 [질문] 일본 도쿄 숙소 문의 드립니다. (구글맵 기준) [10] 니플8196 24/05/02 8196
176047 [질문] 종합소득세 계산? 관련 질문입니다 [8] 달달한고양이7042 24/05/02 7042
176046 [질문] [스1] 프로씬 '최다승'의 빌드는 뭘까요? [13] v.Serum7893 24/05/02 7893
176045 [질문] 랜덤 뽑기 확률을 여쭤봅니다. [5] brpfebjfi6801 24/05/02 6801
176044 [질문] 90년대 중후반 노래를 찾는데요. [3] 탈모인 베지터6518 24/05/02 6518
176043 [질문] 파일(PDF) 연결 프로그램 변경 [6] Part.37629 24/05/02 7629
176042 [질문] 짜치다 짜친다 이거 무슨뜻인가요 [47] 란팡9591 24/05/02 9591
176041 [질문] 여름휴가로 휴양지로 가려고 하는데 추천 부탁드려요 [2] 생힝5886 24/05/02 5886
176040 [질문] 푸켓은 10월 중순이 좋을까요 11월 초가 좋을까요? [5] 귀여운호랑이5783 24/05/02 5783
176039 [질문] 페르소나5 / 파판7 리메이크 인터그레이드 질문이에요! [11] 골드쉽6574 24/05/02 6574
176038 [질문] 일본 물가 관련 문의드립니다 ^^ [17] 깔끔하게7139 24/05/01 7139
176037 [질문] 신발 사이즈조절용 미세깔창 같은거 없을까요 [4] 스핔스핔5814 24/05/01 5814
176036 [질문] iptime공유기에서 지원해주는 간이 nas어떤가요? [3] 키토5965 24/05/01 5965
176035 [질문] 정부 지출 중 고정비와 변동비를 구분해서 확인할 수 있을까요? VictoryFood5782 24/05/01 5782
176034 [질문] 사람 얼굴 자동으로 인식해서 블러처리할 수 있는 방법이 있을까요? [2] 기다리다5611 24/05/01 5611
176033 [질문] 골프 컨시드 관련 질문입니다 [4] 니체5381 24/05/01 5381
176032 [질문] 와이파이가 컴퓨터는 되는데 폰은 안됩니다. [3] 찬가(PGR21)5718 24/05/01 5718
176031 [질문] 피처폰 사용하시는분 계실까요? [2] 제논5511 24/05/01 5511
목록 이전 다음
댓글

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