jQuery:如何来回切换按钮的文本？

Question

一个关于 jQuery/Javascript 的问题:

请先检查以下 HTML 代码:

<div class="quandoo-widget" id="quandoo-booking-widget"></div>
<script src="https://booking-widget.quandoo.com/index.js" data-merchant-id="48554" data-theme="dark"></script>
<button class="home-menu-link-reservation">RESERVATION</button>

这是我的 Index.html 上预订小部件的 HTML 代码

这是类“quandoo-widget”的同一个 div 以及类“home-menu-link-reservation”的“预订按钮”的 CSS:

.quandoo-widget {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 5%;
z-index: 300;
}

.home-menu-link-reservation {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 77%;
z-index: 500;
margin-top: 20px;
padding: 5px 26px;
border-style: solid;
border-width: 1.5px;
border-color: hsla(0, 0%, 100%, .8);
background-color: rgba(8, 24, 21, .4);
font-family: Miller, sans-serif;
color: #fff;
font-size: 15px;
font-weight: 400;
text-align: center;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
}

现在我的问题是:我想使用 jQuery 来打开和关闭预订小部件，我实际上是通过下面的 jQuery 代码实现的:

$('.social-icons').hide();
$('.social-icons').fadeIn(6000);
$('.home-menu-link-reservation').hide();
$('.home-menu-link-reservation').fadeIn(3000);
$('.quandoo-widget').hide();
// Function Button Click
$('.home-menu-link-reservation').on('click', function() {
    // Fade Widget In and Out on Click
    $('.quandoo-widget').fadeToggle( 800, 'swing' );
    // Change Button Text from Reservation to Zurück
    var textToggle = $('.home-menu-link-reservation').text('Zurück');
});

现在，如果您测试代码，您会看到小部件确实会切换，并且在第一次单击时按钮上的“预订”文本会更改为“Zurück”。

我被卡住的地方是:我需要在我们切换按钮时将预订按钮的文本改回“预订”。

因此，当小部件弹出时，它是“Zurück”，代表“返回”，当小部件未显示文本时，应该再次显示“预订”。

你能帮帮我吗？

谢谢!!

Answer 1

您始终将文本设置为 'Zurück' 您必须测试文本是否等于 'RESERVATION' 然后将其设置为 '祖鲁克':

$('.social-icons').hide();
$('.social-icons').fadeIn(6000);
$('.home-menu-link-reservation').hide();
$('.home-menu-link-reservation').fadeIn(3000);
$('.quandoo-widget').hide();
// Function Button Click
$('.home-menu-link-reservation').on('click', function() {
    // Fade Widget In and Out on Click
    $('.quandoo-widget').fadeToggle( 800, 'swing' );
    // Change Button Text from Reservation to Zurück
    var textToggle = $('.home-menu-link-reservation').text() == "Zurück" ? 'RESERVATION' : 'Zurück';

    $('.home-menu-link-reservation').text(textToggle)
});

https://jsfiddle.net/xq37r6fv/1/