Question

我对Jquery很新，所以对此有任何帮助都会受到赞赏。

希望这是有道理的：

我已经建立了一个基于Twitter Bootstrap的网站，它有多个崩溃div，每个div由自己的按钮触发。这些按钮都属于同一个类。

我正在使用“show”和“hide”事件来更改背景图像css属性（从“+”表示展开到“ - ”表示崩溃）。

我仍然不确定如何使用“this”来定位当前元素，因此我只能更改显示/隐藏其div的按钮上的背景。

$('#myDiv').on('show', function () {

    $("a.myBtn").css({
        'background': 'url(/wp-content/themes/wpbootstrap/bootstrap/img/btn_collapse.png) no-repeat',
        'background-position': 'right 3px'
    });
});

$('#myDiv').on('hide', function () {

    $("a.myBtn").css({
        'background': 'url(/wp-content/themes/wpbootstrap/bootstrap/img/btn_expand.png) no-repeat',
        'background-position': 'right 3px'
    });

});

Answer 1

$('#myDiv').on({
  'show':function() {
        //in the line below, $(this) represents $("#myDiv");
        $(this).doSomething();
        $("a.myBtn").removeClass("expand").addClass("collapse");
   },
   'hide':function(){
        $("a.myBtn").removeClass("collapse").addClass("expand");
   }
});

Answer 2

我会尝试通过创建两个css类来简化这一过程，例如：

.expanded {
  background: ....
}

.collapsed{
  background: ....
}

在你的jquery中，你可以只有一个处理程序$(".myBtn").on ('click') ....

在您的处理程序中，您可以使用hasClass ()进行检查，看看它来自哪个州，然后使用addClass和removeClass更改css类

e.g。

  if ($(this).hasClass ('expanded') {
     $(this).addClass ('collapsed');
     $(this).removeClass ('expanded');

  }

多个选择器使用相同的事件

2 个答案: