更改点击文本不按预期工作

我想用javascript或Jquery来做典型的显示/隐藏菜单。我遇到的问题是字体真棒图标或引导似乎搞乱.text（）函数，以便有额外的间距和我的if语句不会按预期方式工作。希望能让这个工作跨浏览器。更改点击文本不按预期工作

$('#list-btn').click(function() { 
 

 
    var el = $('#list-btn') 
 
    console.log(el.text()) 
 

 

 
    if (el.text() == el.text("Hide Instructions")) { 
 
    el.text("Show Instructions"); 
 
    } else { 
 

 
    el.text("Hide Instructions"); 
 
    } 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> 
 
<li> 
 
    <a href="#" class="hidden-sm hidden-xs" data-toggle="tab" id="list-btn"> 
 
    <i class="fa fa-fw fa-list white"></i>&nbsp;Hide Instructions</a> 
 
</li>

来源

2017-03-08 GISKid

尝试：'如果（el.text（）== “隐藏说明”）从控制台' – Fr33d0m

@ Fr33d0m仍呈现空间当我打印文本时，它将删除图标。我认为由于空格，第一个if语句与文本不匹配。 – GISKid

您需要正确的比较。

if (el.text().trim() === "Hide Instructions"){

但是，我建议您将文本包装在span中。这将防止在执行text()操作时删除<i>元素。

$('#list-btn').click(function() { 
 
    var el = $('span', this) 
 
    console.log(el.text()) 
 
    if (el.text().trim() == "Hide Instructions") { 
 
    el.text("Show Instructions"); 
 
    } else { 
 
    el.text("Hide Instructions"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> 
 
<li> 
 
    <a href="#" class="hidden-sm hidden-xs" data-toggle="tab" id="list-btn"> 
 
    <i class="fa fa-fw fa-list white"></i>&nbsp;<span>Hide Instructions</span></a> 
 
</li>

来源

2017-03-08 18:00:43 Satpal

完美运作。谢谢，你的解释也很棒！会接受！ – GISKid

尝试

if (el.text().trim() === "Hide Instructions"){...}

来源

2017-03-08 18:00:25 caisah

jQuery代码

<script> 
$(document).ready(function(){ 
    $('#list-btn').off().on('click',function() { 

    var el = $('#list-btn') 
    console.log(el) 


    if (el.text() == "Hide Instructions") { 
    el.text("Show Instructions"); 
    } else { 

    el.text("Hide Instructions"); 
    } 
    }); 
}); 
</script>

来源

2017-03-08 18:02:01

更改点击文本不按预期工作

回答

相关问题