0

私は、サムネイルが内部にあるアコーディオンであるプロジェクトに取り組んでおり、クリックするとアコーディオンの横に画像が表示されます。これまでのところ、次のコードを使用して動作させることができました。

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 枚以上の写真を持っていますが、特に必要がない限り、すべての写真を撮りたいとは思っていません。

4

2 に答える 2

10

リンクにクラスを与える:

<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 です。

于 2013-06-24T18:23:14.647 に答える
0

これで十分なはずです

$(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 である which を使用します。

それを b に置き換えて、そのための toggleClass ..

于 2013-06-24T18:22:51.803 に答える