jquery |在點擊動作只有第一次作品

爲什麼腳本從下面使用的URL只有當我第一次點擊元素，第二次後沒有？jquery |在點擊動作只有第一次作品

<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/

來源

2014-09-13 X9DESIGN

的jQuery()構造函數返回一個對象，所以總是執行你的第一個if塊，這將永遠是真正的

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

演示：Fiddle

但這個c一個被簡化爲

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

演示：Fiddle

來源

2014-09-13 10:33:31

這適用於。非常感謝你！ – X9DESIGN 2014-09-13 10:38:30

WOW。第二個解決方案是偉大的:)良好的工作夥伴！ – X9DESIGN 2014-09-13 11:24:01

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

這不檢查#hider是否包含文本「隱藏」的，因爲它似乎你認爲它。它所做的是製作含有包含該文本的所有span#hider元素的列表。如果沒有，它會返回一個jQuery包裝器對象。

爲此，如果使用if($('yourSelector'))並沒有什麼與你的選擇被發現，它總是會返回truthy，所以你的代碼永遠不會進入第二if。

相反，你應該這樣做：

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

來源

2014-09-13 10:34:36 isogram

非常感謝您的詳細解釋！現在一切都很簡單！再次感謝你。 – X9DESIGN 2014-09-13 10:37:56

如果這是正確的解決方案，請將其標記爲接受的答案:)（帖子分數下面的選中標記） – isogram 2014-09-13 10:47:13

試試這個：

$('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'); 
    } 
});

來源

2014-09-13 10:40:10

簡簡單單就隊友：

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

來源

2014-09-13 10:40:50 codebased

$('#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/

來源

2014-09-13 10:49:00

jquery |在點擊動作只有第一次作品

回答

相關問題