Question

我正在开展一个项目，里面有一个带缩略图的手风琴，当你点击一个手风琴旁边出现的图片时。到目前为止，我已经设法使用以下代码使其工作：

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张照片，除非必须，否则不要特别想为所有这些照片做。

Answer 1

给链接一个类：

<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使该函数具有通用性，但特定于链接点击。

Here is a working jsFiddle based on this logic。

图片显然没有上传，但在Chrome开发者工具中，您可以看到相应的图片类更改。如果您想继续冒泡但阻止链接操作：

$('.ThumbClick').click(function(e){
    var $id = this.id.replace('a','b');

    e.preventDefault();
    $('.show,#'+$id).toggleClass('show',0);
});

只是提供它作为替代，要么应该工作正常。 Here is the jsFiddle for that logic

Answer 2

这应该足够了

$(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和toggleClass ...

需要缩短我的JQuery UI JS

2 个答案: