jquery - 使用 jQuery 切换文本

Question

我想在第一次单击时更改文本，cta-end h1然后Modification在close 第二次单击时更改文本 --> close-->modification等等。我希望文本切换。

这是我的 HTML

    <div id="cta-end">
     <h1>Modification</h1>
    </div>

<div id="bloc1"><h3>BLOC 1</h3></div>
<div id="bloc2"><h3>BLOC 2</h3></div>

jQuery

$(document).ready(function () {


    $('#cta-end').click(function () {
        $('#bloc1,#bloc2').toggle();
    });

});

我试图在堆栈上找到解决方案，但没有找到..

这是演示

谢谢你 ：）

Answer 1

您可以使用：

 $('#cta-end').click(function () {
    $('#bloc1,#bloc2').toggle();
    $(this).children().text(($(this).children().text()=="Modification")?"close":"Modification");
});

Answer 2

将您的事件处理程序更改为这个，它应该可以正常工作。

 $('#cta-end').click(function () {
    $('#bloc1,#bloc2').toggle();
    if($('#bloc1').css("display") != "none"){
        $('#cta-end h1').text("Close");
    }
    else
    {
        $('#cta-end h1').text("Modification");
    }

});

Answer 3

用于children()获取文本<h1>，如果是三元条件..

试试这个

 $('#cta-end').click(function () {
    $(this).children().text(($(this).children().text()=="Modification")?"close":"Modification");

     $('#bloc1,#bloc2').toggle();
});

在这里摆弄

Answer 4

也许只是：http: //jsfiddle.net/g4Rw5/6/

<div id="cta-end">
    <h1 class='toggle'>Modification</h1>
    <h1 class='toggle' style="display: none;">Close</h1>
</div>

然后添加.toggle到您的选择器：

$('#cta-end').click(function () {
     $('#bloc1,#bloc2,.toggle').toggle();
});