单击时的图像代码太长
Image on click code is too long
我编写了这段代码，这样当你点击九张图像中的一张时，你就会得到另一张（我在Photoshop上用文本制作了图像）。我的代码运行得很好，但它真的很长。有人知道怎么把它变短吗？
Javascript：
$(document).ready(function() { /*Altijd aanroepen per script*/
$(document)
.on('click', '#imgClickAndChange', function changeImage() {
if (document.getElementById("imgClickAndChange").src == "http://127.0.0.1:50150/img/thirdtwo.png") {
document.getElementById("imgClickAndChange").src = "http://127.0.0.1:50150/img/thirdtwohover.png";
} else {
document.getElementById("imgClickAndChange").src = "http://127.0.0.1:50150/img/thirdtwo.png";
}
})
$(document)
.on('click', '#imgClickAndChange2', function changeImage() {
if (document.getElementById("imgClickAndChange2").src == "http://127.0.0.1:50150/img/thirdone.png") {
document.getElementById("imgClickAndChange2").src = "http://127.0.0.1:50150/img/thirdonehover.png";
} else {
document.getElementById("imgClickAndChange2").src = "http://127.0.0.1:50150/img/thirdone.png";
}
})
$(document)
.on('click', '#imgClickAndChange3', function changeImage() {
if (document.getElementById("imgClickAndChange3").src == "http://127.0.0.1:50150/img/thirdthree.png") {
document.getElementById("imgClickAndChange3").src = "http://127.0.0.1:50150/img/thirdthreehover.png";
} else {
document.getElementById("imgClickAndChange3").src = "http://127.0.0.1:50150/img/thirdthree.png";
}
})
$(document)
.on('click', '#imgClickAndChange4', function changeImage() {
if (document.getElementById("imgClickAndChange4").src == "http://127.0.0.1:50150/img/thirdfour.png") {
document.getElementById("imgClickAndChange4").src = "http://127.0.0.1:50150/img/thirdfourhover.png";
} else {
document.getElementById("imgClickAndChange4").src = "http://127.0.0.1:50150/img/thirdfour.png";
}
})
$(document)
.on('click', '#imgClickAndChange5', function changeImage() {
if (document.getElementById("imgClickAndChange5").src == "http://127.0.0.1:50150/img/thirdfive.png") {
document.getElementById("imgClickAndChange5").src = "http://127.0.0.1:50150/img/thirdfivehover.png";
} else {
document.getElementById("imgClickAndChange5").src = "http://127.0.0.1:50150/img/thirdfive.png";
}
})
$(document)
.on('click', '#imgClickAndChange6', function changeImage() {
if (document.getElementById("imgClickAndChange6").src == "http://127.0.0.1:50150/img/thirdsix.png") {
document.getElementById("imgClickAndChange6").src = "http://127.0.0.1:50150/img/thirdsixhover.png";
} else {
document.getElementById("imgClickAndChange6").src = "http://127.0.0.1:50150/img/thirdsix.png";
}
})
$(document)
.on('click', '#imgClickAndChange7', function changeImage() {
if (document.getElementById("imgClickAndChange7").src == "http://127.0.0.1:50150/img/thirdseven.png") {
document.getElementById("imgClickAndChange7").src = "http://127.0.0.1:50150/img/thirdsevenhover.png";
} else {
document.getElementById("imgClickAndChange7").src = "http://127.0.0.1:50150/img/thirdseven.png";
}
})
$(document)
.on('click', '#imgClickAndChange8', function changeImage() {
if (document.getElementById("imgClickAndChange8").src == "http://127.0.0.1:50150/img/thirdeight.png") {
document.getElementById("imgClickAndChange8").src = "http://127.0.0.1:50150/img/thirdeighthover.png";
} else {
document.getElementById("imgClickAndChange8").src = "http://127.0.0.1:50150/img/thirdeight.png";
}
})
$(document)
.on('click', '#imgClickAndChange9', function changeImage() {
if (document.getElementById("imgClickAndChange9").src == "http://127.0.0.1:50150/img/thirdnine.png") {
document.getElementById("imgClickAndChange9").src = "http://127.0.0.1:50150/img/thirdninehover.png";
} else {
document.getElementById("imgClickAndChange9").src = "http://127.0.0.1:50150/img/thirdnine.png";
}
})
});
CSS:#pictures {
background-color: rgb(35, 35, 35);
color: rgb(204, 55, 77);
text-align: center;
padding-top: 2%;
padding-bottom: 2%;
width: 100%;
min-height: 100vh;
float: left;
overflow: hidden;
font-size: 30px;
}
.onethird {
margin-left: 1%;
margin-right: 1%;
margin-top: 5%;
width: 25%;
}<div id="pictures">
<img src="img/thirdtwo.png" class="onethird" id="imgClickAndChange" onclick="changeImage()"></img>
<img src="img/thirdone.png" class="onethird" id="imgClickAndChange2" onclick="changeImage()"></img>
<img src="img/thirdthree.png" class="onethird" id="imgClickAndChange3" onclick="changeImage()"></img>
<img src="img/thirdfour.png" class="onethird" id="imgClickAndChange4" onclick="changeImage()"></img>
<img src="img/thirdfive.png" class="onethird" id="imgClickAndChange5" onclick="changeImage()"></img>
<img src="img/thirdsix.png" class="onethird" id="imgClickAndChange6" onclick="changeImage()"></img>
<img src="img/thirdseven.png" class="onethird" id="imgClickAndChange7" onclick="changeImage()"></img>
<img src="img/thirdeight.png" class="onethird" id="imgClickAndChange8" onclick="changeImage()"></img>
<img src="img/thirdnine.png" class="onethird" id="imgClickAndChange9" onclick="changeImage()"></img>
</div>
</div>我推荐两件事。首先将两个url都放在每个元素上。
<img src="img/thirdtwo.png" class="onethird" id="imgClickAndChange1" data-src="img/thirdtwo.png" data-srchover="img/thirdtwohover.png"></img>
然后，当他们都遵循这种模式时，你可以做一些类似的事情：
$(document).on('click', '.onethird', function() {
var $this = $(this);
if ($this.is('.hoverDisplayed')) {
//is hover, so we need to revert it
$this.attr('src', $this.data('src');
} else {
//is not hover, so make it hover
$this.attr('src', $this.data('srchover');
}
//toggle the class to reflect what it should be next time
$this.toggleClass('hoverDisplayed');
});
function hoverFile(filename){
if (filename.indexOf('hover') != -1){
// remove hover
console.log('remove');
var updatedFilename = filename.replace('hover','');
}
else {
// add hover
console.log('add');
var extension = filename.substr(filename.lastIndexOf('.')+1);
var originalFilename = filename.substr( 0, filename.indexOf( "." ) );
var updatedFilename = originalFilename + 'hover.' + extension;
}
return updatedFilename;
}
$(document).ready(function() { /*Altijd aanroepen per script*/
$('.onethird').click(function() {
console.log('before: ' + this.src);
this.src = hoverFile(this.src);
console.log('after:' + this.src);
});
});<div id="pictures">
<img src="img/thirdtwo.png" class="onethird"></img>
<img src="img/thirdone.png" class="onethird"></img>
<img src="img/thirdthree.png" class="onethird"></img>
<img src="img/thirdfour.png" class="onethird"></img>
<img src="img/thirdfive.png" class="onethird"></img>
<img src="img/thirdsix.png" class="onethird"></img>
<img src="img/thirdseven.png" class="onethird"></img>
<img src="img/thirdeight.png" class="onethird"></img>
<img src="img/thirdnine.png" class="onethird"></img>
</div>试试这个。。
$(document).on('click', '.onethird', function changeImage() {
var imagePath = document.getElementsByClassName("onethird")[0].src;
if (imagePath == "http://127.0.0.1:50150/img/thirdtwo.png") {
imagePath = "http://127.0.0.1:50150/img/thirdtwohover.png";
}
else if ( imagePath == "http://127.0.0.1:50150/img/thirdtwo.png") {
imagePath = "http://127.0.0.1:50150/img/thirdtwohover.png";
}
.
.
.
.
else{
imagePath = "http://127.0.0.1:50150/img/thirdtwo.png";
}
});
不幸的是，在看到其他人发帖之前，我就已经开始为你制定解决方案了，哦，好吧！这是我为你写的。
我使用了一个通用click事件侦听器，用于一个通用类，您可以在单击时将其应用于要交换的所有图像。单击图像时，它将使用您使用HTML元素上可用的data-属性定义的名称交换图像。我使用jQuery .attr()函数是因为我不知道您使用的是哪个jQuery版本，而.data()不适用于早期版本的jQuery。请让我知道这是否适合你，或者我是否需要做出调整。代码贴在下面，干杯！
JavaScript
$(document).ready(function() {
var totalImages = 10;
var basePath = '/img/';
var hoverClass = 'is-hover';
var clickImageSelector = '.imgClickAndChange';
function changeImage() {
var $img = $(this);
var hoverImg = $img.attr('data-hover-img');
var staticImg = $img.attr('data-static-img');
if ($img.hasClass(hoverClass)) {
// Set Image SRC to staticImg if using hoverImg
// (determined by existance of hoverClass)
$img.attr('src', basePath + staticImg);
$img.removeClass(hoverClass);
}
else {
// Set Image SRC to hoverImg if using staticImg
// (determined by existance of hoverClass)
$img.attr('src', basePath + hoverImg);
$img.addClass(hoverClass);
}
}
$(document).on('click', clickImageSelector, changeImage);
});
HTML
<div id="pictures">
<img src="img/thirdone.png" class="imgClickAndChange onethird" data-static-img='thirdone.png' data-hover-img='thirdonehover.png' />
<img src="img/thirdtwo.png" class="imgClickAndChange onethird" data-static-img='thirdtwo.png' data-hover-img='thirdtwohover.png' />
<img src="img/thirdthree.png" class="imgClickAndChange onethird" data-static-img='thirdthree.png' data-hover-img='thirdthreehover.png' />
<img src="img/thirdfour.png" class="imgClickAndChange onethird" data-static-img='thirdfour.png' data-hover-img='thirdfourhover.png' />
...
<img src="img/thirdnine.png" class="imgClickAndChange onethird" data-static-img='thirdnine.png' data-hover-img='thirdninehover.png' />
</div>
删除onclick属性，因为您不需要它们（使用它们也不是很好的做法）。click事件处理程序是在yur JS代码中设置的。
这应该为您的HTML完成工作示例：
$('.onethird').click(function(e){
var old_src = $(this).attr('src');
var new_src = old_src.indexOf('hover') > -1 ? old_src.replace('hover', '') : old_src.split(".")[0] + 'hover.png';
$(this).attr('src', new_src);
});
相关文章：
- 使图像在单击时展开到不大于浏览器
- 从Web服务器下载图像按钮单击使用JavaScript
- 如何使按钮图像在单击时添加到变量中
- 如何使表格单元格中的图像可单击
- 在新页面中打开图像，单击时打印
- 图像交换单击jquery，3张图像
- 如何让图像在单击按钮时更改
- 按钮应该在基于 JavaScript 代码单击时更改段落
文本，但它不会更改文本
- 向图像添加单击或按钮
- 使用图像映射单击鼠标时的警报框
- 滚动图像，单击时显示可移动的弹出窗口
- 图像定位点单击在IE7中不起作用
- 高亮显示图像区域-单击链接时
- JQuery通过另一次单击的代码单击
- 在位置绝对图像上单击不发射
- 无法从标记反转地理代码单击
- 从标记反转地理代码单击
- 无法在jQuery中为2个图像设置单击事件
- Javascript -使用代码单击图像
- 如何编写代码-单击图像并执行php脚本
