javascript - 需要缩短我的 JQuery UI JS

Question

已关闭。这个问题是 off-topic 。目前不接受答案。

---

想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。

已关闭10 年前。

Improve this question

我正在开发一个项目，它是一个内部有缩略图的 Accordion ，当您单击其中一个时， Accordion 旁边会显示一张图片。到目前为止，我已成功使用以下代码使其正常工作:

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 .