更改基于隐藏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