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");
});

等等

如果有帮助，这是其中一个标题的 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 回答