코드를 줄이기 위해 여러 이벤트를 하나의 함수로 요약하는 데 어려움을 겪고 있습니다. img src가 onclick으로 전환되는 몇 가지 이미지에 간단한 클릭 기능이 있습니다.
HTML
<a href="#!">
<img src="image_1.png" style="opacity: 1;" class="preiskreis_1" />
</a>
<a href="#!">
<img src="image_2.png" style="opacity: 1;" class="preiskreis_2" />
</a>
<a href="#!">
<img src="image_2.png" style="opacity: 1;" class="preiskreis_3" />
</a>
JS
$('a .preiskreis_1').on({
'click': function() {
var src = ($(this).attr('src') === 'preis_1.png')
? 'finanz_1.png'
: 'preis_1.png';
$(this).fadeTo(450,0, function() {
$(this).attr('src', src).fadeTo(100,1);
});
}
});
$('a .preiskreis_2').on({
'click': function() {
var src = ($(this).attr('src') === 'preis_2.png')
? 'finanz_2.png'
: 'preis_2.png';
$(this).fadeTo(450,0, function() {
$(this).attr('src', src).fadeTo(100,1);
});
}
});
$('a .preiskreis_3').on({
'click': function() {
var src = ($(this).attr('src') === 'preis_3.png')
? 'finanz_3.png'
: 'preis_3.png';
$(this).fadeTo(450,0, function() {
$(this).attr('src', src).fadeTo(100,1);
});
}
});
이제 내가 달성하고 싶은 것은 js의 코드를 하나의 함수로 합산하는 것입니다. 이것을 달성하는 방법에 대한 아이디어가 있습니까?
여기 바이올린이 있습니다
감사합니다.
이거 한번 해봐:
<a href="#!">
<img src="http://hornung.eprospekt.info/assets/images/preis_1.png" alt="Kauf oder Finanzierung" style="opacity: 1;" class="preiskreis" />
</a>
<br>
<a href="#!">
<img src="http://hornung.eprospekt.info/assets/images/preis_2.png" alt="Kauf oder Finanzierung" style="opacity: 1;" class="preiskreis" />
</a>
<br>
<a href="#!">
<img src="http://hornung.eprospekt.info/assets/images/preis_3.png" alt="Kauf oder Finanzierung" style="opacity: 1;" class="preiskreis" />
</a>
<script>
$('a .preiskreis').on({
'click': function() {
var src = $(this).attr('src');
var a = src.split('/');
var n = a[a.length-1];
if (n.substr(0,5) == 'preis') {
n = n.replace('preis','finanz');
}
else {
n = n.replace('finanz','preis');
}
src = 'http://hornung.eprospekt.info/assets/images/'+n;
$(this).fadeTo(450,0, function() {
$(this).attr('src', src).fadeTo(100,1);
});
}
});
</script>
이 경우 이미지 파일 이름을 찾은 다음 preis가 포함되어 있는지 확인합니다. 그렇다면 fianz로 바꾸고 그렇지 않으면 preis로 바꾸십시오. 그래서 그것은 당신의 이름을 유지합니다.
바이올린 : http://jsfiddle.net/ft8et2o6/6/
몇 가지 추가 참고 사항 : <a>클릭 할 수 있도록 이미지를 태그에 넣을 필요는 없습니다 . 사용자에게 클릭 할 수 있음을 표시하려면 cursor: pointer;스타일을 사용하십시오 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다