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
수정 아이콘
상세한 답변 감사합니다 :)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
175835 [삭제예정] 축의금 관련 질문드립니다. [24] 인천테란5936 24/04/18 5936
175834 [질문] 간헐적 인터넷 끊김 조언 부탁드려요 [16] 탄야7019 24/04/18 7019
175833 [질문] 설/추석 명절 홍콩 가보신 분 계신가요? [5] LG의심장박용택5098 24/04/18 5098
175832 [질문] 비행기 조종 게임이나 시뮬레이션 관련 질문 [4] 지니팅커벨여행5688 24/04/18 5688
175831 [질문] 재미로 코딱지 파는 심리를 분석해 보려고 합니다(설문 요청). [13] 인생을살아주세요6102 24/04/18 6102
175829 [질문] 워드에서 영단어 마지막글자가 지워지는 증상? [2] beloved5093 24/04/18 5093
175828 [삭제예정] 미국주식 양도소득세 계산시 이동평균법으로 신고하는 방법이 있을지요...? [19] nexon8408 24/04/17 8408
175827 [질문] 엑셀 고수분들께 요청 드립니다. [6] 귀여운호랑이8095 24/04/17 8095
175826 [질문] 부모님 해외여행 질문드립니다 [6] 리코타홀릭8365 24/04/17 8365
175825 [질문] 엑셀 텍스트나누기 함수 질문 [5] possible7563 24/04/17 7563
175824 [질문] 읽기 쉬운 소설 또는 책 추천 [39] 작은마음8634 24/04/17 8634
175823 [질문] 부모자식간 부동산 매매서 증여세 문의드립니다 [12] Vertigo8335 24/04/17 8335
175822 [질문] 스팀할인 몬스터헌터 월드 구매 문의드립니다 [2] 공놀이가뭐라고7034 24/04/17 7034
175821 [질문] 서프샤크 vpn 30일날 환불 요구하니 구독 자동갱신만 취소해줬네요. 방법없을까요? [2] 그때가언제라도7178 24/04/17 7178
175820 [질문] 신차 틴팅 관련 질문 드립니다. [10] 원스5255 24/04/17 5255
175818 [질문] 비슷한 노래 추천 부탁드립니다. Aiurr5966 24/04/17 5966
175817 [질문] 사이버펑크 2077할만 한가요? [13] 구급킹6724 24/04/17 6724
175816 [질문] 유재석의 12제자는 누구인가요? [23] 오타니8145 24/04/17 8145
175815 [질문] 아기가 키즈카페 대신 어린이집에 가야 하는 이유 [28] 랑비8050 24/04/17 8050
175814 [질문] 무라카미 하루키 소설 추천 부탁드립니다. [16] 쿨럭6316 24/04/17 6316
175813 [질문] 기자가 A모 인사, B모 인사 식으로 익명 출처를 남길때 허위로 쓸 수도 있나요? [9] No.99 AaronJudge6211 24/04/17 6211
175812 [질문] 위탁수화물 물건 중 빼야되는 것을 골라주세요 [7] DogSound-_-*6032 24/04/16 6032
175811 [질문] 5600x에서 5700x3d 업글 가치가 있을까요? [7] 레이오네6514 24/04/16 6514
목록 이전 다음
댓글

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