jQuery 충돌 문제

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
jQuery 충돌 문제

QA

jQuery 충돌 문제

본문

1일전 즉, 14일에 '상품 큰이미지가 안보여요' 라는 질문을 등록했었습니다.

그런데 인터넷을 뒤지다가 결국은 문제점을 찾았고 해결책 또한 찾았습니다.

 

원래는 상품 상세페이지에 상품 큰이미지가 보이질 않았었습니다. 큰 상품이미지의 li가 display:none로 되어 있고 여기에 display:block  속성을 가진 .vasible 이라는 클래스를 마우스 오버시마다 추가해 주는 스크립트 문제라고 판단하고,

 

hesd_sub.php 에 선언된 스크립트를 하나씩 지우며 확인을 했습니다.

 

원래 원본에서 선언된 js는 아래와 같습니다.

 

<!-- 원래 선언되어 있던 js -->

 

<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>

<?php

if (defined('_SHOP_')) {

    if(!G5_IS_MOBILE) {

?>

<script src="<?php echo G5_JS_URL ?>/jquery.shop.menu.js"></script>

<?php

    }

} else {

?>

<script src="<?php echo G5_JS_URL ?>/jquery.menu.js"></script>

<?php } ?>

<script src="<?php echo G5_JS_URL ?>/common.js"></script>

<script src="<?php echo G5_JS_URL ?>/wrest.js"></script>

 

그리고 제가 추가로 선언한 js는, 위 선언 밑으로 아래와 같이 추가하였습니다.

 

<!-- 추가로 선언한 js -->

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    -------> 왜 추가 했는지 모름 

<script src="<?php echo G5_JS_URL ?>/jquery.slides.min.js"></script>     ----> 메인 비쥬얼 영역의 슬라이드

<script type="text/javascript" src="<?php echo G5_JS_URL ?>/tab.js"></script>----> tab 사용을 위해 선언 

 

 

① 그런데 여기서 가장 위에 있는

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

 

    를 삭제하니, 상품 상세페이지에 정상적으로 큰 이미지가 나오는 것입니다.

② 왜 위 제이쿼리를 선언했는지 정확히 알수는 없으나 (기억이 가물가물) 위 제이쿼리와의 충돌이라 판단하였습니다.

    그래서 인터넷을 뒤져본 결과

 

③ <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

       jQuery.noConflict();

       var jq$=jQuery;

     </script>

 

  라는 코드를 삽입하면 충돌을 피할 수 있다고 하여,

 삽입하였으나, 그러자 갑자기 메인 슬라이드와, 영카트5에서 제공하는 배너 슬라이드가 사라져버리는 것입니다.

 

④ 그래서 선언 순서의 문제인가? 하여, 위 ③번의 코드를 가장 먼저 선언해주었더니 모두 정상 작동하는 것을 확인하였습니다.

 

------------------------------------------------------------------------------------

여기서, 제가 드리고 싶은 질문은,

① <script src="http://code.jquery.com/jquery-1.9.1.min.js">

 

   는 어디에 사용하는 제이쿼리인지 여부

 

② 그리고 위의 설명처럼 해당 코드를 가장 먼저 선언했는데요, 그래도 괜찮은 것인지, 제가 찾은 위 코드는 이상이 없는 것인지의 여부 등..

 

입니다..

------------------------------------------------------------------------------------

 

고수님들의 답변 부탁드립니다. 감사합니다..꾸벅~~

이 질문에 댓글 쓰기 :

답변 5

그누보드 자체적으로 /jquery-1.8.3.min.js 를 이미 사용하고 있기 때문에

<script src="http://code.jquery.com/jquery-1.9.1.min.js">​ 를 삭제했을 때 별다른 이상이 없다면 

삭제하셔도 상관없을것 같은데요. 슬라이드 추가하셨을 때 넣었을 가능성이 있어보이네요.

​<script src="<?php echo G5_JS_URL ?>/jquery.slides.min.js"></script>

배너 슬라이드 기능이 jquery 1.9 이상부터 작동하나봅니다.

그렇다고 jquery 1.8를 지우고 jquery 1.9를 사용하시면 영카트 기능 중에 몇가지를 또 에러가 날 수 있습니다.

영카트 기본이 jquery 1.8버전으로 제작이 되었기에 jquery 1.8 버전을 반드시 사용하셔야 합니다.

 

1.8 버전에서 동작되는 슬라이드기능을 사용하시든 슬리이드 js를 1.8에 맞게 개발하셔야 합니다. 

저는 슬라이드 js를 직접 개발하여 사용합니다. 

업그레이드라고 보시면 될것이구요, 둘중에 하나만을 사용해보시고 문제 없는 버전으로 사용하시면 될듯합니다. 

 

아니면 링크처럼 해보시던지..

 

http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=32718 

충돌을 피하는 코드는 jquery외의 다른 라이브러리랑 충돌을 피하기 위한 코드입니다.

prorotype.js 도 jquery 랑 같이 $예약어를 이용하기때문에 같이 쓸수 없습니다...

jquery도 여러버전을 같이 호출하면 충돌납니다...

1.9를 삭제하시고 배너동작에 문제가 있다면 배너를 수정하시는게...

 

 

 

좋은 답변들 너무 감사합니다. 모두 도움이 된 답변이라  어느 분을 채택해야 할지 몰라, 제일 먼저 답변을 작성해 주신 '작은별'님의 답변을 채택한 점 양해 부탁드립니다.

 

아! 그리고, 1.9 제이쿼리를 삭제하고도 아무런 문제가 없어 그냥 삭제했습니다. 제이쿼리 공부를 좀 해야겠습니다..

 

 

꾸벅~~ 감사합니다. 

답변을 작성하시기 전에 로그인 해주세요.
전체 0 | RSS
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT