更改點擊文本不按預期工作

我想用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

更改點擊文本不按預期工作

回答

相關問題