jQuery的交換DIV內容優化

我有以下-working-代碼，我想用一個三級運營商，並給予該對象的「狀態」無功優化。然而，我很困惑，到底在哪裏把點擊事件來完成這一點。jQuery的交換DIV內容優化

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>

來源

2013-01-06 Aaron Murray

有什麼確切的問題你呢？ –

澄清，我想重寫這個作爲一個功能交換div（如現在這樣），而不是有2個獨立的功能（每個div一個） - 即。一個點擊事件處理使用第三運營商來回交換 –

試試這個

$(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) 
     }); 
    });     
});

DEMO

來源

2013-01-06 18:55:21

這正是我想要完成的（更好，因爲它不需要if/else或third操作符）謝謝。但是，一個簡單的問題是，如果*我有另一個鏈接（我可以一直使用button代替），該鏈接也會附加到這個函數中，我推測我可以使用「find（'a.switch '）代替查找（'a'），以便僅附加到'可切換'鏈接。 –

另外，感謝您的'演示'，我從未見過這個網站，它會在非常有用的其他東西我想測試 –

你對你的第一個問題絕對正確，或者你可以使用'$（'。adbox a.switch'）'而不是'$（'。adbox'）。find（'a .switch'）'。但是'.find（）'稍微快一點 –

jQuery的交換DIV內容優化

回答

相關問題