0

私はこれにまったく慣れておらず、自分自身を教えており、実際にいくつかのガイダンスを使用できます. それぞれに情報ボタンがある一連のスライダーがあります。「情報ボタン」を押すと情報が表示され、「閉じるボタン」を押すと再び非表示になります。問題は、これを自動的に行う方法がわからないため、現在、異なるクラス名 (cover1、cover2、cover3 など) を使用して各スライダーの新しいコードを作成する必要があることです。

恐ろしいコードが現在行っていることは次のとおりです。

$('.infobtn').click(function(){
    $('.cover', '.boxgrid').stop().animate({top:'0px'},{queue:false,duration:360});
    $(this).hide();
    $('.closebtn').show();
    $(".cover", '.boxgrid').css("pointer-events", "auto");
});
$('.closebtn').click(function(){
    $(".cover", '.boxgrid').stop().animate({top:'455px'},{queue:false,duration:360});
    $(this).hide();
    $('.infobtn').show();
    $(".cover", '.boxgrid').css("pointer-events", "none");
});


$('.infobtn2').click(function(){
    $(".cover2", '.boxgrid').stop().animate({top:'0px'},{queue:false,duration:360});
    $(this).hide();
    $('.closebtn2').show();
    $(".cover2", '.boxgrid').css("pointer-events", "auto");
});
$('.closebtn2').click(function(){
    $(".cover2", '.boxgrid').stop().animate({top:'455px'},{queue:false,duration:360});
    $(this).hide();
    $('.infobtn2').show();
    $(".cover2", '.boxgrid').css("pointer-events", "none");
});

等

キャプションの 1 つの HTML を次に示します。

<div class="boxgrid captionfull" style="z-index: 51;">
    <div id="info" class="cover boxcaption">
        <div id="infotext">
            <h3>Sed eu rutrum velit. Nunc leo massa nunc. Lorem ipsum
            dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nibh
            vitae volutpat euismod, risus leo porta nunc, in hendrerit diam sem
            commodo orci. Cras vitae tincidunt sapien. Integer dolor nisl,
            egestas sit amet mollis a, viverra sed sem. Pellentesque rhoncus
            ursus justo, sit posuere.</h3>
        </div>
    </div>
</div>

<div id="btn" class="infobtn">
    <img src="images/info.png" />
</div>

<div id="btn" class="closebtn" style="display: none;">
    <img src="images/close.png" />
</div>

助けてくれてありがとう！

4

2 に答える 2

1

または、もっと簡単にすることもできます

function bind_events() {
  $('div.infobtn').each(function(index, ele) {
    $($(".cover", '.boxgrid')[index]).stop().animate({top:'0px'},{queue:false,duration:360});
    $(ele).hide();
    $($('.closebtn')[index]).show();
    $($(".cover2", '.boxgrid')[index]).css("pointer-events", "auto");
  });

  $('div.closebtn').each(function(index, ele) {
    $($(".cover", '.boxgrid')[index]).stop().animate({top:'455px'},{queue:false,duration:360});
    $(ele).hide();
    $($('.infobtn')[index]).show();
    $($(".cover", '.boxgrid')[index]).css("pointer-events", "none");
  });
}

この方法では、要素のタイプごとに複数のクラスを作成する必要はありません。

于 2012-07-26T21:21:48.443 に答える
0

クラス名にパターンがあるため、イベントバインディング関数を使用できます。

function bind_events() {
  $('div[class^=infobtn]').each(function() {
    var num = $(this).attr('class').match(/\d+/)[0];
    if (num == null) num = '';

    $(".cover"+num, '.boxgrid').stop().animate({top:'0px'},{queue:false,duration:360});
    $(this).hide();
    $('.closebtn'+num).show();
    $(".cover2"+num, '.boxgrid').css("pointer-events", "auto");
  });

  $('div[class^=closebtn]').each(function() {
    var num = $(this).attr('class').match(/\d+/)[0];
    if (num == null) num = '';

    $(".cover"+num, '.boxgrid').stop().animate({top:'455px'},{queue:false,duration:360});
    $(this).hide();
    $('.infobtn'+num).show();
    $(".cover"+num, '.boxgrid').css("pointer-events", "none");
  });
}
于 2012-07-26T21:05:48.257 に答える