jquery怎样实现点击切换文本内容？

无关风月zz

12982534

发布于
2017-10-10

jquery点击切换文本内容，如<div>Yes</div>，点击这个div，里面文本变为No，再次点击变为Yes。有没有办法实现？

javascript jquery

阅读 10.2k

7 个回答

蛋炒太阳

✓ 已被采纳

<div class="toggle">
  Yes
</div>

$('.toggle').on('click', function() {
    // 利用自定义属性来判断显示内容的标记，规避标记变量维护难和大量标签属性堆积问题
    var flag = $(this).data('flag');
    // flag 值为 undefined 或 false 时为 'No'，否则为 'Yes'，同时设置 flag 值为自身反值
    $(this).text(!flag ? 'No' : 'Yes').data('flag', !flag);
});

// .toggle 文字可以禁止选中，设置 user-select 为 none
.toggle {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

==================== 上例综合了下面两种方法 ====================

$('.toggle').on('click', function() {
    var cur = $(this).text();
    if (cur) {
          $(this).text(cur === 'Yes' ? 'No' : 'Yes');
    }
});

var flag = false;
$('.toggle').on('click', function() {
    flag = !flag;
    $(this).text(flag ? 'No' : 'Yes');
});

善良的乌贼

3.7k11436

发布于
2017-10-10

        $("div").click(function(){
            if($(this).text() == "yes"){
                $(this).text("no");
            }else{
                $(this).text("yes");
            }
        })

lan7484

271210

发布于
2017-10-10

toggle()方法

cc长空

1.9k1924

发布于
2017-10-10

<div data-content='No'>Yes</div>

$(选择器).click(function(){
    var c1=$(this).html()
    var c2=$(this).attr('data-content')
    $(this).html(c2).attr(c1)
})

就这么凑合用吧

testnullundefine

2.5k32141

发布于
2017-10-10

<body>
    <div id="text">Yes</div>
</body>
<script>
    $("#text").on('click', function (event) {
        var text = $(this).text().toUpperCase();
        $(this).text(text === 'YES' ? 'No' : 'Yes');
    })
</script>

Medusatisfy

17822234

发布于
2017-10-10

本来jQuery有一个toggle函数，但好像现在的版本删了，可以自己实现一个。

a2774206

1.8k32853

发布于
2017-10-10

<body>

<div id="str">YES</div>

</body>
<script>

let str = 1;
$("#str").on('click', function () {
    str=!str;
    $(this).text(str?'YES':'No');
})

</script>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

jquery怎样实现点击切换文本内容？

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

前端有没有办法实现页面截图？