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
수정 아이콘
상세한 답변 감사합니다 :)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
175779 [질문] 핸드폰 발열이 많이 있을때 냉동실에 넣어도 괜찮나요 [9] 뵈미우스6600 24/04/15 6600
175778 [질문] 첫 중고차 구매 자동차보험 관련 질문드립니다. [3] 7105673 24/04/15 5673
175777 [질문] 편찮으신 장모님 모시고 갈 식당 추천 부탁드려요(서울 근처) [14] 수지짜응6485 24/04/15 6485
175776 [질문] 자동차보험 제 명의 내에서 차량 변경 질문입니다 [2] 매즈미켈슨6685 24/04/15 6685
175775 [질문] 라이트파이낸스 사기인가요? [21] 교자만두6549 24/04/15 6549
175774 [질문] 이 나무 이름이 뭘까요? [4] workbee5548 24/04/15 5548
175773 [질문] 5세 여아와 오사카여행 [15] 링크7340 24/04/15 7340
175772 [질문] JBL 1300이라는 사운드바 연결 질문입니다. [1] 아타락시아16461 24/04/15 6461
175770 [질문] 맥 OS용 이미지 뷰어 프로그램 문의 [9] 한국화약주식회사5326 24/04/14 5326
175769 [질문] 아이폰에 있는 음악파일 접근 가능한가요 [3] egernya6603 24/04/14 6603
175768 [질문] [디아3] 혹시 시즌 하시는분 계신가요 [2] Scour6057 24/04/14 6057
175767 [질문] 편한 운동화나 신발 추천좀 부탁드립니다 [17] 같이걸을까6632 24/04/14 6632
175766 [질문] 5월초 일본 휴양 여행 어디가 좋을까요? [17] 회전목마6694 24/04/14 6694
175764 [질문] 감기가 올 것 같은 느낌입니다. 어떻게 해야 할까요 ㅜㅜ [12] 엔지니어5960 24/04/14 5960
175763 [질문] 초등학생과 같이 볼만한 OTT 영화 추천부탁드립니다. [10] 유니꽃7407 24/04/14 7407
175762 [질문] 내일 LCK 결승전 시작시간 [6] 마인부우6701 24/04/14 6701
175761 [질문] 롤챔스 결승 뷰잉 파티요.. [6] Aquaris5842 24/04/13 5842
175760 [질문] 스포티비나우 사이트 접속 에러 [1] 돔페리뇽6928 24/04/13 6928
175759 [질문] pc 블루투스 이건 어디가 문제일까요? [5] 던멜5969 24/04/13 5969
175758 [질문] 컴퓨터 책상 깊이... 60cm면 충분할까요? [18] 다시마두장8906 24/04/13 8906
175757 [질문] 동행복권 홈페이지에서 구매한 로또 당첨되어본 분 있으신지요..? [23] nexon10627 24/04/13 10627
175755 [질문] 아주 예전 지인의 연락처를 찾을 수 있는 방법이 있을까요? [3] 라리5590 24/04/13 5590
175754 [질문] 야구 룰 질문입니다 [4] 월터화이트5321 24/04/13 5321
목록 이전 다음
댓글

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