정의되지 않은 'replace'속성을 읽을 수 없습니다.

이미지가있는 간단한 메뉴가 있습니다. 이미지 원본은 뷰어의 동작 (마우스 오버, 클릭, 없음)에 따라 변경됩니다. 다른 이미지를 클릭 할 때 비활성 이미지 소스를 기본값으로 재설정하는 데 문제가 있습니까?정의되지 않은 'replace'속성을 읽을 수 없습니다.

(에 클릭) button1S.jpg -> button1S_active.jpg I (이) .replace를이 아니요 사용하려고했지만, 나는 속성을 읽을 수 없습니다 "크롬에 따라 오류가

'교체'의 정의되지 않음 ".

<head> 
<script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
</head> 

<body> 
<img class="logo" src="logo.jpg"><br> 
<img class="menu_btn" src="button1S.jpg"><br> 
<img class="menu_btn" src="button2S.jpg"><br> 
<img class="menu_btn" src="button3S.jpg"><br> 
<img class="menu_btn" src="button4S.jpg"> 
</body> 

<script> 
$("img.menu_btn").hover(

function() { 
    this.src = this.src.replace('.jpg', '_hover.jpg'); 
    $(this).addClass('hovered'); 
}, 

function() { 
    this.src = this.src.replace('_hover.jpg', '.jpg'); 
    $(this).removeClass('hovered'); 
}); 

$('img.menu_btn').click(

function() { 
    var unactive = $('img.menu_btn').not(this); 
    unactive.src = unactive.src.replace('_active.jpg', '.jpg'); //without this, it works but _active.jpg isn't removed when unactive. 
    unactive.removeClass("active"); 
    $(this).addClass('active'); 
    this.src = this.src.replace('_hover.jpg', '_active.jpg'); 
    alert(this.src); 
});

대단히 감사합니다.

출처

2014-12-05 Maki

StackOverflow에 오신 것을 환영합니다! [해당 제목에 "태그에"태그를 포함해야합니까? "] (http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-the-titles)를 참조하십시오. 여기서 컨센서스는 다음과 같습니다. "아니, 그들은해서는 안된다". –

'Arun P Johny '가 솔루션을 제공했지만, 스타일을 사용하여이 유형의 호버 애니메이션을 수행하고 클래스를 추가/제거했습니다. (예 : 이미지 내의 오프셋을 변경). 이렇게하면 표시되는 현재 글리치가 피할 수 있습니다 (호버 이미지가 필요할 때로드 됨). –

내 조언을 무시하려면 jQuery 래퍼 내의 DOM 객체를 참조 할 때'unactive [0]'을 사용하면된다. 예 : .src = "unact [0] .src = unactive [0] .src.replace' 또는 대신 jQuery'attr ('src')'함수를 사용하십시오 : P –

문제가 unactive 인은의 jQuery 객체가 아닌 내 댓글에 이어 DOM 요소 참조

$("img.menu_btn").hover(function() { 
 
    if ($(this).hasClass('active')) { 
 
    return; 
 
    } 
 
    this.src = this.src.replace('normal', 'hover'); 
 
    $(this).addClass('hovered'); 
 
}, function() { 
 
    if ($(this).hasClass('active')) { 
 
    return; 
 
    } 
 
    this.src = this.src.replace('hover', 'normal'); 
 
    $(this).removeClass('hovered'); 
 
}); 
 

 

 
$('img.menu_btn').click(function() { 
 
    var unactive = $('img.menu_btn').not(this); 
 
    unactive.attr('src', function(i, src) { 
 
    return src.replace('active', 'normal') 
 
    }); 
 
    unactive.removeClass("active"); 
 
    $(this).addClass('active'); 
 
    this.src = this.src.replace('hover', 'active'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img class="menu_btn" src="//placehold.it/64X32&text=normal" /> 
 
<br/> 
 
<img class="menu_btn" src="//placehold.it/64X32&text=normal" /> 
 
<br/> 
 
<img class="menu_btn" src="//placehold.it/64X32&text=normal" /> 
 
<br/> 
 
<img class="menu_btn" src="//placehold.it/64X32&text=normal" /> 
 
<br/>

출처

2014-12-05 11:46:36

@Maki 업데이트를 참조하십시오 –

대단히 감사합니다! 나는 여전히 클래스에서 크롬 (크롬)에서 작동하지 않는 것을 보지만 이미지 src는 영향을받지 않는다. 어쩌면 나 자신이 무엇이 잘못되었는지 보려고 할 수 있습니다. 고맙습니다. – Maki

, 당신은 단지를 사용하여 모든이 "이미지 URL의 변경"을 대체 할 수있다 단일 클래스와 "스프라이트 (sprites)"라고 알려진 기술을 사용합니다.

스프라이트는 기본적으로 여러 그림이 포함 된 이미지 파일입니다. 내 JSFiddle에 사용되는 하나는 다음과 같습니다

enter image description here

JSFiddle :http://jsfiddle.net/TrueBlueAussie/7v1L2yqd/2/

당신은 스타일로 이미지 오프셋을 변경하여이를 참조. 제 예제에서는 단순히 CSS 스타일을 사용하여 배경 이미지가 오프셋되도록 hover 스타일을 추가 및 제거합니다.

$('.menu_btn').hover(function() { 
    $(this).addClass('hover'); 
}, function() { 
    $(this).removeClass('hover'); 
});

CSS :

.menu_btn { 
    width: 44px; 
    height: 44px; 
    background: url(http://www.w3schools.com/css/img_navsprites.gif) 0 0; 
} 
.hover { 
    background-position: -46px 0; 
}

여기

핸디 참조 : 스프라이트의 모든 아이콘이 포함 된 경우 http://www.w3schools.com/css/css_image_sprites.asp

, 당신은 자신의 기본 이미지를 상쇄하고 .hover 클래스는 것 그냥 수평 위치로 이동 :

출처

2014-12-05 14:04:28

TrueBlue, 후속 조치에 대한 감사드립니다. 나는 당신이 지금 말하고있는 것을 이해하고, 왜 당신이 그것을 제안했는지 이해합니다. 의심의 여지없이 하나의 이미지를로드하는 3보다 낫다. 나는 jquery와 CSS를 사용하는 사이에 더 많은 이미지 또는 더 많은 CSS 클래스를 가지고있는 것 같아요. 팁 고마워! – Maki

순수한 효율 관점에서 더 많은 CSS 클래스가 더 많은 이미지보다 선호됩니다. 이미지 다운로드 오버 헤드는 약간 큰 CSS 파일보다 훨씬 큽니다. jQuery 코드도 크게 단순화 된 것을 볼 수있다. –

나는 본다. 백업 정보를 보내 주셔서 감사합니다. – Maki

정의되지 않은 'replace'속성을 읽을 수 없습니다.

답변

관련 문제