jquery-selectors - jQuery 交换 DIV 内容优化

Question

我有以下工作代码，我想使用三级运算符进行优化，并为对象提供“状态”变量。但是，我对在哪里放置点击事件来完成此操作感到困惑。

HTML（支持具有以下布局的多个 div）：

<div class="adbox">
  <div class="ad-image">Image 2 Goes Here <a class="swap-content" href="#">Next</a></div>
  <div class="ad-content">Ad 2 text goes here <a class="swap-image" href="#">Back</a></div>
</div>

jQuery代码：

<script lang="javascript">
  $(document).ready(function() {
    var speed = 500;
    $('a.swap-content').click(function() {
      var myad = $(this).parent().parent();
      $(myad).find('div.ad-image').fadeOut(speed, function(){
        $(myad).find('div.ad-content').fadeIn(speed)
      });
    });
    $('a.swap-image').click(function() {
      var myad = $(this).parent().parent();
      $(myad).find('div.ad-content').fadeOut(speed, function(){
        $(myad).find('div.ad-image').fadeIn(speed)
      });
    });                            
  });
</script>  

Answer 1

试试这个

$(document).ready(function() {
    var speed = 500;
    $('.adbox').find('a').click(function() {
        var self = $(this); 
        self.parent().fadeOut(speed, function(){
            self.parent().siblings('div').fadeIn(speed)
        });
    });                   
});

演示