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
수정 아이콘
상세한 답변 감사합니다 :)
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
175769 [질문] 아이폰에 있는 음악파일 접근 가능한가요 [3] egernya6586 24/04/14 6586
175768 [질문] [디아3] 혹시 시즌 하시는분 계신가요 [2] Scour6042 24/04/14 6042
175767 [질문] 편한 운동화나 신발 추천좀 부탁드립니다 [17] 같이걸을까6615 24/04/14 6615
175766 [질문] 5월초 일본 휴양 여행 어디가 좋을까요? [17] 회전목마6674 24/04/14 6674
175764 [질문] 감기가 올 것 같은 느낌입니다. 어떻게 해야 할까요 ㅜㅜ [12] 엔지니어5945 24/04/14 5945
175763 [질문] 초등학생과 같이 볼만한 OTT 영화 추천부탁드립니다. [10] 유니꽃7388 24/04/14 7388
175762 [질문] 내일 LCK 결승전 시작시간 [6] 마인부우6684 24/04/14 6684
175761 [질문] 롤챔스 결승 뷰잉 파티요.. [6] Aquaris5829 24/04/13 5829
175760 [질문] 스포티비나우 사이트 접속 에러 [1] 돔페리뇽6913 24/04/13 6913
175759 [질문] pc 블루투스 이건 어디가 문제일까요? [5] 던멜5958 24/04/13 5958
175758 [질문] 컴퓨터 책상 깊이... 60cm면 충분할까요? [18] 다시마두장8894 24/04/13 8894
175757 [질문] 동행복권 홈페이지에서 구매한 로또 당첨되어본 분 있으신지요..? [23] nexon10607 24/04/13 10607
175755 [질문] 아주 예전 지인의 연락처를 찾을 수 있는 방법이 있을까요? [3] 라리5583 24/04/13 5583
175754 [질문] 야구 룰 질문입니다 [4] 월터화이트5303 24/04/13 5303
175753 [질문] 냉삼 어떻게 먹어야 맛날까요? [14] 월터화이트5867 24/04/13 5867
175752 [질문] 서울 짜장면 기깔나는 집 문의드립니다 [11] larrabee5720 24/04/13 5720
175751 [질문] 투자 질문 [6] Emiyasiro5236 24/04/13 5236
175750 [질문] 간단하게 먹을 수 있는 단백질 뭐가 있을까요? [8] 돔페리뇽5162 24/04/13 5162
175749 [질문] 블러드본보다 덜 잔인한 소울 추천 부탁 드려요. [14] 모나크모나크5532 24/04/13 5532
175747 [질문] 퇴사자 입니다 퇴직연금 dc 질문입니다. [4] 마스쿼레이드6766 24/04/13 6766
175745 [질문] 혹시 배경 좀 투명화 시켜주실 수 있나요? [6] 마지막좀비6600 24/04/12 6600
175744 [질문] irp 잘 아시는 분 질문드릴게요... [3] 닉넴길이제한8자6209 24/04/12 6209
175743 [질문] 하드디스크 망가졌는데 50만원이면 복구하나요? [18] 붕붕붕6962 24/04/12 6962
목록 이전 다음
댓글

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