jquery - jQuery |点击操作仅在第一次时有效

为什么下面使用的URL脚本仅在我第一次单击元素时有效，而在第二次之后不起作用？

<span id="hider">hide</span>

<script type="text/javascript">
$('span#hider').click(function() {
    if($('span#hider:contains("hide")')) {
        $('span#hider').html('show');
    }
    else if($('span#hider:contains("show")')) {
        $('span#hider').html('hide');
    }
});
</script>

http://jsfiddle.net/c40hjnpq/

最佳答案

jQuery()构造函数返回一个对象，该对象将始终为true，因此始终执行第一个if块

$('#hider').click(function () {
    if ($(this).is(':contains("hide")')) {
        $(this).html('show');
    } else if ($(this).is(':contains("show")')) {
        $(this).html('hide');
    }
});

演示：Fiddle



但这可以简化为

$('#hider').click(function () {
    $(this).html(function (i, html) {
        return $.trim(html) == 'hide' ? 'show' : 'hide';
    });
});

演示：Fiddle