更改名称

Question

我有这个javascript来显示和隐藏一个类。

$(document.body).ready(function(){
var hidden=$('.hidden');
$('#slid').click(function(){
    if(hidden.hasClass('visible')){
       hidden.removeClass('visible');
    }
    else{
       hidden.addClass('visible');
    }
    });
});

我想要的是，信息名称，一旦点击，它会更改其名称关闭。

https://jsfiddle.net/q6oe2c80/

Answer 1

尝试使用.text()和简单的ternary operator来实现您想要的，

$(document.body).ready(function() {
  var hidden = $('.hidden');
  $('#slid').click(function() {
    hidden.toggleClass("visible");
    $(this).text(hidden.hasClass("visible") ? "CLOSE" : "INFO")
  });
});

演示

Answer 2

这是基于你的小提琴。

https://jsfiddle.net/q6oe2c80/7/

 $(document.body).ready(function(){
 var hidden=$('.hidden');
 $('#slid').click(function(){
    if(hidden.hasClass('visible')){
       hidden.removeClass('visible');
       $(this).html("INFO");
     }
    else
    {
       hidden.addClass('visible');
       $(this).html("Close");
    }
 });});

Answer 3

只需在#slid https://jsfiddle.net/d2mbzLqw/中编辑html

$(document.body).ready(function(){
var hidden=$('.hidden');
$('#slid').click(function(){
    if(hidden.hasClass('visible')){
        hidden.removeClass('visible');
        $(this).html("INFO");
    }
    else{
        hidden.addClass('visible');
        $(this).html("CLOSE");
    }
});});