Question

我有两个简单的div，带有一个按钮来切换它们的可见性。我想让按钮的标题显示隐藏div的标题。所以当你拥有＆＃34; Landscape＆＃34; div可见，按钮会说＆＃34;切换到肖像＆＃34;。在展示＆＃34;肖像＆＃34; div，按钮应该说＆＃34;切换到横向＆＃34;。

<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

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

<强> jsFiddle example

Answer 2

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

根据隐藏的div更改按钮文本

2 个答案: