Question

我有一个带有一堆按钮的地图，用于显示和隐藏容器div。我不想为每个按钮分配相同的代码，因为它们完全相同。

我想在单击按钮时创建一个变量，这样它就可以替换DIV ID中的一个部分（处理程序？）

所以我可以将#fiche_8_1980_img_container称为#fiche_VARIABLE。

我的问题的第二部分是我所做的动画功能都是这样的：

  $('#fiche_8_1980_img_container').animate({"opacity" : 1,}, 150, function() {});

有没有办法将它放在一个实例或对象中，以便我可以更容易地调用它？

这是我用于按钮的一段代码。

$('#button_8_algiers').click(function() {
        $('#fiche_8_1980_img_container').css('visibility','visible');
                $('#fiche_8_1980_img_container').animate({"opacity" : 1,}, 150, function() {
                });     
        });

如果有人能指出我正确的方向那就太棒了，我不知道从哪里开始寻找......

谢谢

Answer 1

尝试使用基本上使用jQuery链接的帮助，这样就不需要将对象缓存到局部变量中。

$('#button_8_algiers').click(function() {
        $('#fiche_8_1980_img_container').css('visibility','visible');
        .animate({"opacity" : 1,}, 150, function() {
        });     
});

Answer 2

会有这样的帮助吗？

var ficheHandler = {
   animateFiche: function(fiche) {
      fiche
         .css('visibility','visible');
         .animate({"opacity" : 1,}, 150, function() {
          });
   }
}


$('#button_8_algiers').click(function() {
     ficheHandler.animateFiche($('#fiche_8_1980_img_container'));
});

Answer 3

我假设您可以控制HTML。如果您有许多具有共享功能的按钮，请为它们提供相同的CSS类，并在rel或data属性中添加唯一标识符：

$('a.myButton').click(function(e) {
    e.preventDefault();
    $('#' + $(this).attr('data-target')).fadeIn(150);
});

创建函数实例

3 个答案: