如何使用jQuery更改單擊按鈕文本

我有這個slideToggle代碼。當我點擊「打開」按鈕時，它將文本更改爲「關閉」。即使再次單擊它，它仍然保持「關閉」狀態，所以我想在點擊「關閉」時將文本改回「打開」，反之亦然。如何使用jQuery更改單擊按鈕文本

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#flip").click(function(){ 
     $("#panel").slideToggle("slow"); 
     $('#flip').html("close"); 
     reset(); 
    }); 
}); 
</script> 

<style> 
#panel,#flip 
{ 
    padding:5px; 
    text-align:center; 
    background-color:#e5eecc; 
    border:solid 1px #c3c3c3; 
} 
#panel 
{ 
    padding:50px; 
    display:none; 
} 
</style> 
</head> 
<body> 

    <div id="flip">open</div> 
    <div id="panel">Hello world!</div>

來源

2014-08-28 Ali Alnoaman

請嘗試下面的代碼。

$(document).ready(function(){ 
    $("#flip").click(function(){ 
     $("#panel").slideToggle("slow"); 
     var t=$('#flip').html()==='close'?'open':'close'; 
     $('#flip').html(t); 
     reset(); 
    }); 
});

更好的是你可以有一個布爾值來檢查你顯示的是什麼。像：

var showingClose=false; 

$(document).ready(function(){ 
...... 
    $("#panel").slideToggle("slow"); 
    if(showingClose){ 
     $('#flip').html('open'); 
    }else{ 
     $('#flip').html('close'); 
    } 
    showingClose = !showingClose; 
.......

正如指出的@filoxo的評論，最好使用$('#flip').text()獲取/設置值。

來源

2014-08-28 00:43:00 TheVillageIdiot

謝謝，它的工作完美:) – 2014-08-28 00:53:15

儘管這適用於當前的情況下，這很容易斷裂，如果另一個HTML元素放在id爲「炫」的DIV中造成的問題。類似於'

Open

'。這是因爲'.html（）'方法將返回*整個內部html值，標籤和全部。只是一個考慮！ – filoxo 2014-08-28 01:10:45

@filoxo肯定，但是因爲它從這裏設置只有較小的變化。而且他似乎只是在嘗試。這看起來不像生產代碼。 – TheVillageIdiot 2014-08-28 04:44:46

只需切換CSS類。檢查http://api.jquery.com/toggleclass/

$(document).ready(function(){ 
    $("#flip").click(function(){ 
     $("#panel").toggleClass("flip"); 
    }); 
});

CSS：

#panel 
{ 
    padding:50px; 
    display:none; 
} 
.flip 
{ 
    padding:5px; 
    text-align:center; 
    background-color:#e5eecc; 
    border:solid 1px #c3c3c3; 
}

來源

2014-08-28 00:44:52 swift

您可以利用jQuery的.is()功能與visibility selector結合，以確定是否顯示或不元素。這在我看來比布爾值更好，並且對於可讀性也更好。最後，使用ternary operator可以幫助您基於所述可見性正確設置按鈕文本。

$(document).ready(function(){ 
    $("#flip").click(function(){ 
     $("#panel").slideToggle("slow"); 
     var btnTxt = $("#panel").is(":visible") ? "close" : "open"; 
     $('#flip').text(btnTxt); 
     reset(); 
    }); 
});

來源

2014-08-28 00:54:33 filoxo

如何使用jQuery更改單擊按鈕文本

回答

相關問題