jquery - 如何在简单的扩展 jQuery 中更改文本？

Question

当我点击展开并显示此[X取消]时，如何更改[+添加]的文本

但是为了明白这个想法，我想要实现的是我在接下来的两张图片中显示的内容。

$(function() {
$('.expand-one').click(function(){
    $('.content-one').slideToggle('fast');
});
});

.expand-one {
    color: #4D8FE5;
    cursor: pointer;
    font-size: 14px;
}

.content-one {
    clear: both;
    display:none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="sitesection">
    <span class="expand-one">+ Add</span>
    <div class="content-one"><input type="text" /></div>
</div>

Answer 1

您可以使用this和三元运算符来实现这一点。

$(function() {
$('.expand-one').click(function(){
    $('.content-one').slideToggle('fast');
    $(this).text(($(this).text() == '+ Add') ? 'X Cancel' : '+ Add')

});
});

.expand-one {
    color: #4D8FE5;
    cursor: pointer;
    font-size: 14px;
}

.content-one {
    clear: both;
    display:none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="sitesection">
    <span class="expand-one">+ Add</span>
    <div class="content-one"><input type="text" /></div>
</div>