如何在一个简单的展开jQuery中更改文本？

Question

单击展开并显示此X取消时，如何更改+Add的文本

但是为了达到这个想法，我想要实现的是我在接下来的两张图片中展示的东西。

​

​

​

​

​

$(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

您可以使用这个和三元操作符来实现这一点。

​

$(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>

​

Answer 2

$(function() {
$('.expand-one').click(function(){
    $('.content-one').slideToggle('fast');
    if($(".content-one input").is(":visible")){
       $(this).text("+ Add");
    }else{
      $(this).text("X Cancel");
    }
});
});

Answer 3

在这里你可以试试这个

小提琴链接:小提琴

​

$(function() {
$('.expand-one').click(function(){
    $('.content-one').slideToggle('fast');
  			$(this).text(function(i, v) {
          return v === 'X Close' ? '+ADD' : 'X Close'
        })
});
});

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sitesection">
    <span class="expand-one">+ Add</span>
    <div class="content-one"><input type="text" /></div>
</div>

​