如何使用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更改单击按钮文本

回答

相关问题