如何在单击其他元素时更改范围的内容

How to change a span's content when other element is clicked

本文关键字：范围 单击 其他 元素      更新时间：2023-09-26

我想更改此 span 标签的内容：

<span class="ui-btn-text" id="btnText">Read how we have helped</span>

自：

<span class="ui-btn-text" id="btnText">Hide Story</span>

这是我到目前为止得到的：

$('#storyBtn').click(function() {
        $('#story-body').slideToggle('fast', function() {
            $('#btnTextShow').hide();
            $('#btnTextHide').show();
        });
    });

我认为您只想更新跨度的文本...如果是这样，请尝试此 ->

<span class="ui-btn-text" id="btnText">Read how we have helped</span>
   $('#storyBtn').click(function() {
            $('#story-body').slideToggle('fast', function() {
                $('#btnText').text("Hide Story");
                $('#btnTextShow').hide();
                $('#btnTextHide').show();
            });
        });

*未经测试

下面是有关如何实现此目的的一个很好的例子：
首先看JSFiddle DEMO版

让我们看看我们在这里有什么：

$('.ui-btn-text:eq(1)').hide();
$('#storyBtn').click(function() {
    $("#story-body").slideToggle(400);
    $(".ui-btn-text").toggle(300);
});

和 html：

<div id="storyBtn">
    <span class="ui-btn-text">Read how we have helped</span>
    <span class="ui-btn-text">Hide Story</span>
</div>
<div id="story-body">
    A long,...<br> long time ago...
</div>

信息：

如您所见，我简化并删除了所有不必要的ID和代码，只是为了让大家看到这一切是多么简单。您可以重做我的此更改。

相关文章：