0

ページ上の複数の要素に対してこの機能を複製する必要があります。関数を繰り返してクラス名を変更することで実現できますが、複数のインスタンスを組み合わせたり、クラス名を変更したりする簡単な方法はありますか? スタイルシートでは、リンクがロールオーバーされたときに各画像のタイトルをアニメーション化しています。

関数：

 $("a.link1").hover(function() {
  $(".img1, .img1over").toggleClass("img1 img1over");
});
$("a.link2").hover(function() {
  $(".img2, .img2over").toggleClass("img2 img2over");
});

HTML:

<div id="nav">
<ul>
<li><a href="#" class="link1">link1</a></li>
<li><a href="#" class="link2">link2</a></li>

</ul>
</div>

            <div class="main">
                <div class="grid img1">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

                    <div class="grid img2">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

        </div>
4

4 に答える 4

1

まず、コードを単純化するために、すべてのリンクに共通のクラスが必要になります。

HTML

<div id="nav">
<ul>
    <li><a href="#" class="link" id="link1">link1</a></li>
    <li><a href="#" class="link" id="link2">link2</a></li>
</ul>
</div>
<div class="main">
                <div class="grid img1">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                    </div>

                    <div class="grid img2">
                    <img src="1.jpg" />
                    <div class="mask">
                        <h2>title</h2>
                    </div>
                 </div>
 </div>

関数

$('.link').hover(function() {
    var id = $(this)[0].id.substring(4);
    $(".img"+id).toggleClass("img"+id+" img"+id+"over");
});

これで、リンククラスとid link + numberを使用して任意の数のリンクを作成でき、対応するimg+numberを参照します。

于 2012-06-01T16:35:30.370 に答える
0

私はおそらくこのように向かうでしょう：

$("#nav a").hover(function() {
    var num = $(this).attr('class').replace('link', '');
    // OR
    // var num = parseInt($(this).attr('class'), 10);

    $(".img" + num).toggleClass("img" + num + "over");
});​

あなたもクラスを切り替えていることは知っていますが、img代わりにcssを作り直すことをお勧めします。<li/>クラス名をクリアする代わりに、親のインデックスを削除することもできます

于 2012-06-01T16:33:28.723 に答える
0

特定のクラス/ID の組み合わせを対応させる場合は、一度記述することができます。

<a href="#" id="link1" class="hover-link">yep</a>
....
<div id="link1-container">
...
<img src="" class="link-image" />
...
</div> 

$('.hover-link').hover(function(e){
   var $this = $(this),
       baseId = $this.attr('id'),
       $img = $('#'+baseId+'-container .link-image');

       if($img.length > 0) {
          $img.toggleClass('the-class-name');
       }
});
于 2012-06-01T16:31:43.990 に答える
0

これは本当に奇妙なケースですが、HTML とこれを行う方法に固執したい場合は、そのための簡単なプラグインを作成します。

http://jsfiddle.net/hkdobrev/8NS89/1/

$.fn.toggleHoverClass = function( selector1, selector2 ){
    return this.hover(function(){
        var index = $( this ).parent().index() + 1,
            class1 = selector1 + index,
            class2 = class1 + selector2;
        $( '.' + class1 + ', .' + class2 ).toggleClass(class1 + ' ' + class2);
    });
};

$(function(){
    $( '#nav' ).find( 'a.link' ).toggleHoverClass( 'img', 'over' );
});

ご不明な点がございましたら、コメントでお問い合わせください:)

于 2012-06-01T16:53:25.003 に答える