我正在做一个项目,这个项目是一个手风琴,里面有缩略图,当你点击其中一个时,手风琴旁边会显示一张图片。到目前为止,我已经设法使用以下代码使其工作:
HTML:
<!--thumbs--->
<a id="1a" href="#"><img src="../../images/thumb/1000.jpg" /></a>
<a id="2a" href="#"><img src="../../images/thumb/1001.jpg" /></a>
<a id="3a" href="#"><img src="../../images/thumb/1002.jpg" /></a>
<a id="4a" href="#"><img src="../../images/thumb/1003.jpg" /></a>
<a id="5a" href="#"><img src="../../images/thumb/1004.jpg" /></a>
<a id="6a" href="#"><img src="../../images/thumb/1005.jpg" /></a>
<!--large photos--->
<img class="hide1" id="1b" src="../../images/fullsize/1000.jpg" />
<img class="hide1" id="2b" src="../../images/fullsize/1001.jpg" />
<img class="hide1" id="3b" src="../../images/fullsize/1002.jpg" />
<img class="hide1" id="4b" src="../../images/fullsize/1003.jpg" />
<img class="hide1" id="5b" src="../../images/fullsize/1004.jpg" />
<img class="hide1" id="6b" src="../../images/fullsize/1005.jpg" />
CSS:
.hide1{
display:none;
}
.show{
display:block !important;
}
和JS(在jquery UI下):
$(function() {
$( "#1a" ).click(function() {
$( ".show" ).toggleClass( "show", 0 );
return false;
});
$( "#1a" ).click(function() {
$( "#1b" ).toggleClass( "show", 0 );
return false;
});
$( "#2a" ).click(function() {
$( ".show" ).toggleClass( "show", 0 );
return false;
});
$( "#2a" ).click(function() {
$( "#2b" ).toggleClass( "show", 0 );
return false;
});
$( "#3a" ).click(function() {
$( ".show" ).toggleClass( "show", 0 );
return false;
});
$( "#3a" ).click(function() {
$( "#3b" ).toggleClass( "show", 0 );
return false;
});
$( "#4a" ).click(function() {
$( ".show" ).toggleClass( "show", 0 );
return false;
});
$( "#4a" ).click(function() {
$( "#4b" ).toggleClass( "show", 0 );
return false;
});
$( "#5a" ).click(function() {
$( ".show" ).toggleClass( "show", 0 );
return false;
});
$( "#5a" ).click(function() {
$( "#5b" ).toggleClass( "show", 0 );
return false;
});
});
有人知道我可以缩短JS的方法吗?我有100多张照片,除非迫不得已,否则我不想对所有照片都这样做。
给链接一个类:
<a id="1a" href="#" class="ThumbClick">
然后应用点击类和使用这个:
$('.ThumbClick').click(function(){
var $id = this.id.replace('a','b');
$('.show,#'+$id).toggleClass('show',0);
return false;
});
由于您正在切换显示的同一个类,因此可以将其合并为逗号分隔的选择器。使用类和this.id
使函数具有通用性,但特定于单击的链接。
以下是一个基于此逻辑的工作jsFiddle。
图片显然还没有上传,但在Chrome开发工具中,你可以看到图片的类发生了适当的变化。如果你想继续冒泡但阻止链接操作:
$('.ThumbClick').click(function(e){
var $id = this.id.replace('a','b');
e.preventDefault();
$('.show,#'+$id).toggleClass('show',0);
});
只要提供它作为一种替代方案,任何一种都应该很好。这是该逻辑的jsFiddle。
这应该是足够好的
$(function () {
$("#1a , #2a, #3a, #4a, #5a").on('click', function () {
var newId = this.id.replace('a', 'b');
$('#' + newId).toggleClass("show", 0);
$(".show").toggleClass("show", 0);
return false;
});
});
使用this.id
,它是单击的当前元素的id。
将其替换为b,并为此切换类。。