Question

为什么下面使用的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/

Answer 1

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

Answer 2

$('span#hider:contains("hide")')

这不会检查#hider是否包含文字＆＃39;隐藏＆＃39;，因为您认为它确实如此。它的作用是列出做包含该文本的所有span#hider元素。如果没有，它将返回一个jQuery包装器对象。

因此，如果您使用if( $('yourSelector') )并且找不到任何选择器，它将始终返回真实状态，因此您的代码永远不会进入第二个if。

相反，你应该这样做：

$('span#hider').click(function() {
    if($('span#hider').html() == "hide") {
        $('span#hider').html('show');
    }
    else if($('span#hider').html() == "show") {
        $('span#hider').html('hide');
    }
});

Answer 3

让它成为简单的伴侣：

$('#hider').click(function() {
    var newValue =  $('#hider').html() === 'show'   ? "hide": "show";
    $('#hider').html(newValue);
});

Answer 4

试试这个：

$('span#hider').click(function() {
    if($('span#hider').text()=='hide') {
        alert($('span#hider').text());
        $('span#hider').html('show');
    }
    else if($('span#hider').text()=='show') {
        alert($('span#hider').text());
        $('span#hider').html('hide');
    }
});

Answer 5

$('#hider').bind('click',function(){
    var hider = $(this);
    var hiderval = $(this).html();
    if(hiderval.indexOf("show") > -1){
        $(this).html('hide');
    }
    else if(hiderval.indexOf("hide") > -1){
        $(this).html('show');
    }
});

小提琴： http://jsfiddle.net/c40hjnpq/23/

jquery |点击动作仅适用于第一次

5 个答案: