引導數據切換=「按鈕」不工作<span>

我使用Bootstrap中的'數據切換'選項作爲按鈕。在按鈕中，我有一個glypicons和一些文字。但是，當你點擊文本時，它會起作用，但是當你點擊圖形時，它不會觸發數據切換。由於數據切換在JSFiddle中不起作用，我無法發佈指向它的鏈接。引導數據切換=「按鈕」不工作<span>

HTML：

<button type="button" id="showHide" class="btn btn-default" data-toggle="button"><span class="glyphicon glyphicon-eye-open"></span> show</button>

的JavaScript：

document.getElementById("showHide").onclick = function() { 
    if ($("#showHide").text() == " show") { 
     document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide"; 
     document.getElementById("showHide").blur(); 
    } else { 
     document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show"; 
     document.getElementById("showHide").blur(); 
    } 
}

我看了網上，但還沒有找到一個解決方案或與人同樣的問題。

來源

2015-05-05 Brammz

似乎在此的jsfiddle工作：https://jsfiddle.net/5qe31kw0/1/ 你能不能張貼一個鏈接到你的代碼或者其他的jsfiddle重新創建它？ – Antfish

@Brammz，我提供了一個JSFiddle，它看起來像它提供的解決方案。你怎麼看？那是你在追求什麼？ –

@Brammz，我刪除解決方案，因爲我同意安東魚，看來，這已經工作 –

在切換事件傳播之前，顯示的是跨度被替換。您可以使用button方法來激活切換而不是數據屬性。

<button type="button" id="showHide" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> show</button> 

document.getElementById("showHide").onclick = function() { 
    if ($("#showHide").text() == " show") { 
     document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide"; 
     jQuery("#showHide").button('toggle');   
     document.getElementById("showHide").blur(); 
    } else { 
     document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show"; 
     jQuery("#showHide").button('toggle');   
     document.getElementById("showHide").blur(); 
    } 
}

View Fiddle

來源

2015-05-05 16:13:06

This Works！非常感謝你！ – Brammz

引導數據切換=「按鈕」不工作<span>

回答

相關問題