更改基於隱藏div的按鈕文本

Question

我有兩個簡單的div用按鈕切換其可見性。我希望按鈕的標題顯示隱藏div的標題。所以當你看到「風景」div時，按鈕會顯示「切換到肖像」。當顯示「肖像」div時，按鈕應該說「切換到風景」。

<div class="container"> 
<div class="row"> 
    <div class="span12"> 
    <div class="panel panel-heading"> 
    <div class="span4"></div> 
    <div class="span4"> 
     <button type="button" class="btn btn-default switch">16:9/9:16</button> 
    </div> 
    <div class="span4"></div> 
    </div> 
    </div> 
</div> 
<div class="row"> 
<div class="panel panel-body"> 
    <div class="span4 cropme" id="landscape" style="width: 1136px; height: 720px;"></div> 
    <div class="span4 cropme" id="portrait" style="width: 720px; height: 1136px;"></div> 
</div> 
</div> 

$('#portrait').hide(); 
$('.switch').click(function(){ 
    $('#portrait').toggle(); 
    $('#landscape').toggle(); 
}); 

http://jsfiddle.net/z2ursLfw/

Answer 1

DEMO

HTML

<button type="button" class="btn btn-default switch">Switch to Portrait</button> 

JS

$('#portrait').hide(); 
$('.switch').click(function(){ 
    $(this).text("Switch to "+($('#portrait').is(":visible") ? "Portrait" : "Landscape")); 
    $('#portrait').toggle(); 
    $('#landscape').toggle(); 
}); 

Answer 2

$('#portrait').hide(); 
$('.switch').click(function() { 
    $('#portrait, #landscape').toggle(); 
    $('button').text('Switch to ' + $('.cropme:hidden').text()) 
}); 

jsFiddle example