jQuery：有沒有更好的方法來切換兩個div？

我目前使用下面的代碼塊來切換兩個div。jQuery：有沒有更好的方法來切換兩個div？

$('.btn-my-projects').click(function(e) { 
    $('.my-projects').show(); 
    $('.all-projects').hide(); 
}); 

$('.btn-all-projects').click(function(e) { 
    $('.my-projects').hide(); 
    $('.all-projects').show(); 
});

顯然它的工作原理，但我想知道是否有更好的方法來做到這一點。感覺像它可以壓縮到一個處理程序與兩個。如果我使用委託，我可以使它成爲單個處理程序，但它會變得更長，需要進行條件檢查以查看哪個按鈕被點擊。

來源

2012-10-09 robdodson

簡單：

function toggle(all) { 
    $('.all-projects').toggle(all); 
    $('.my-projects').toggle(!all); 
} 

$('.btn-my-projects').click(function() { 
    toggle(false); 
}); 

$('.btn-all-projects').click(function() { 
    toggle(true); 
});

如果你想獲得更簡潔：

function makeClickHandler(all) { 
    return function() { 
     $('.all-projects').toggle(all); 
     $('.my-projects').toggle(!all); 
    }; 
} 

$('.btn-my-projects').click(makeClickHandler(false)); 
$('.btn-all-projects').click(makeClickHandler(true));

或者，你可以採取完全不同的方法，並把它與按鈕顯示&皮鏈接使用HTML5 data-*屬性將其分成標記。事情是這樣的：

<button class="project-control" data-show=".all-projects"> 
    Show all projects 
</button> 
<button class="project-control" data-show=".my-projects"> 
    Show my projects 
</button> 

<div class="project all-projects">...</div> 
<div class="project my-projects">...</div>

用JavaScript這樣的：

$('.project-control').on('click', function() { 
    var showSelector = $(this).data('show'); 
    $('.project').hide(); 
    $(showSelector).show(); 
});

注：在真實頁面中，您可能需要緩存選定的元素。

來源

2012-10-09 15:32:28

對我來說，這不像原來的文章那樣可讀。它需要兩個搖頭。 – JonH

@JonH「搖頭？」 –

我可以閱讀並理解它，但我不確定它是否用於編寫較少代碼的目的。仍然是迄今爲止最好的答案IMO – robdodson

如何使用自定義屬性？

HTML：

<div class='my-projects'>my-projects</div> 
<div class='all-projects'>all-projects</div> 
<span class='toggler' hide='.all-projects' show='.my-projects'>btn-my-projects</span> 
<span class='toggler' hide='.my-projects' show='.all-projects'>btn-all-projects</span>

和Javascript：

$('.toggler').click(function(e) { 
    $($(this).attr('hide')).hide(); 
    $($(this).attr('show')).show(); 
});

來源

2012-10-09 15:31:16

如果您只有一個按鈕，這可能是一個不錯的選擇。 http://jsfiddle.net/ggmcj/ – undefined

不，您的代碼切換元素，無論點擊哪個按鈕。 – undefined

如果我點擊兩次相同的按鈕，例如「我的項目」，它將首先關閉我的項目，然後再打開它。這不是我想要的。 – robdodson

您所使用的方法是我會做的方式，但如果你想凝結，可能jQuery的切換將是使用你http://api.jquery.com/toggle/

來源

2012-10-09 15:31:44

這是一個評論不是答案，並通過使用切換，他必須控制至少一個div的狀態。 – JonH

你可以使用toggle（）而不是show（）和hide（）。然後，你可以添加一個類.projects到.my-projects和.all-projects divs，然後切換該選擇器。

來源

2012-10-09 15:32:05

你將如何切換選擇器？ – robdodson

'$（'。projects'）。toggle（）;'我會這樣做。 – 2012-10-09 15:42:39

jQuery：有沒有更好的方法來切換兩個div？

回答

相關問題