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

Question

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

Answer 1

<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');

});