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代码

以下是同一个div的CSS，其类别为“ quandoo-widget”，而其“保留按钮”为类别“ home-menu-link-reservation”：

.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');
});

现在，如果您测试代码，您将看到Widget确实进行了切换，并且第一次单击按钮上的“保留”文本将变为“Zurück”。

卡住的地方是：在切换按钮的同时，我还需要保留按钮的文本改回“ Reservation”。

因此，当窗口小部件弹出时，它的“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/

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

1 个答案: