한 번 클릭하면 이미지를 교체하는 디스플레이를 만들려고합니다 (0에서 1, 1에서 2, 2에서 3, 3에서 0으로 다시) 여기에 약간의 코드가 있습니다
js
function swap() {
if (document.getElementById("Wins").src.endsWith('0win.png') != -1) {
document.getElementById("Wins").src = "images/1win.png";
} else if (document.getElementById("Wins").src.endsWith('1win.png') != -1) {
document.getElementById("Wins").src = "images/2win.png";
} else if (document.getElementById("Wins").src.endsWith('2win.png') != -1) {
document.getElementById("Wins").src = "images/3win.png";
} else if (document.getElementById("Wins").src.endsWith('3win.png') != -1) {
document.getElementById("Wins").src = "images/0win.png";
}
}
function swap1() {
if (document.getElementById("Wins1").src.endsWith('0win.png') != -1) {
document.getElementById("Wins1").src = "images/1win.png";
} else if (document.getElementById("Wins1").src.endsWith('1win.png') != -1) {
document.getElementById("Wins1").src = "images/2win.png";
} else if (document.getElementById("Wins1").src.endsWith('2win.png') != -1) {
document.getElementById("Wins1").src = "images/3win.png";
} else if (document.getElementById("Wins1").src.endsWith('3win.png') != -1) {
document.getElementById("Wins1").src = "images/0win.png";
}
}
HTML
<body>
<img src="images/0win.png" id="Wins" onclick="swap()"/>
<img src="images/0win.png" id="Wins1" onclick="swap1()"/>
</body>
할 말이별로 없어 (생각해)
대신 이것을 사용합니다.
if (document.getElementById("Wins1").src.indexOf('0win') != -1) {
그것은 순수한 JS이고 아마도 더 빠를 것입니다.
프로토 타입 사용을 고집한다면 .src.prototype.endsWith(...
나는 당신의 코드를 조금 더 가볍고 더 가변적이고 유연하게 만들었습니다.
HTML
<body>
<img id="Wins" src="images/0win.png" onclick="swap(this.src)" />
</body>
JS
function swap(src) {
var num = parseInt(src.substr(src.indexOf('win')-1));
if (num == 3) {
num = 0;
} else {
num++;
}
document.getElementById('Wins').src = 'images/'+num+'win.png';
}
작동 예 : http://jsfiddle.net/pMMSL/
(이미지가 없기 때문에 여기에서는 src-tag를 사용하지 않았지만 DevTools (F12)를 열면 콘솔의 alt-tag에서 숫자를 볼 수 있으며 alt-tag를 볼 수 있습니다. HTML에서 변경
이 코드는 훨씬 더 유연합니다 ( http://jsfiddle.net/pMMSL/1/ ) :
function swap(src) {
var currentFile = src.substr(src.lastIndexOf('/')+1);
var currentNum = parseInt(currentFile.substr(currentFile.indexOf('win')-1,1));
if (currentNum == 3) {
var newNum = 0;
} else {
var newNum = currentNum+1;
}
var newFile = currentFile.replace(currentNum,newNum);
document.getElementById('Wins').src = src.replace(currentFile,newFile);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다