無法使用jQuery更改跨度文本

Question

我正在使用引導程序和JQuery。

HTML

<div> 
    <ul> 
     <li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li> 
    </ul>   
</div> 

<button type="button" id="disableButton" 
        class="btn btn-primary" onclick="changeSpan();">Change</button> 

的JavaScript

function changeSpan() { 
$('#monitorStatusSpan span').text('disssssssssssssssssss'); 
} 

這裏是小提琴。 http://jsfiddle.net/alamzeeshan/5bw8d2ta/7/

但仍然span文本沒有改變。

有誰知道我錯過了什麼？

Answer 1

目前，你正在尋找一個span您#monitorStatusSpan（#monitorStatusSpan span）內。

function changeSpan() { 
    $('#monitorStatusSpan span').text('disssssssssssssssssss'); 
} 

這足以只認準ID是這樣的：

function changeSpan() { 
    $('#monitorStatusSpan').text('Your text here'); 
} 

Answer 2

HTML

<div> 
    <ul> 
     <li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li> 
    </ul>   
</div> 

<button id="disableMonitorButton" class="btn btn-primary">Change</button> 

JS

$("#disableMonitorButton").click(function() { 
    $('#monitorStatusSpan').html('disssssssssssssssssss'); 
}); 

PS。不要使用內聯JS！

Answer 3

您的選擇器不正確。您使用的選擇器會找到#monitorStatusSpan元素，然後在其中填充元素。哪些不存在。

由於ID都是唯一的，你可以簡單地使用id選擇目標所需要的元素：

function changeSpan() { 
$('#monitorStatusSpan').text('disssssssssssssssssss'); 
} 

working demo

Answer 4

試試這個

function changeSpan() { 
 
$('#monitorStatusSpan').text('disssssssssssssssssss'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
     <li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li> 
 
    </ul>   
 
</div> 
 
<button type="button" id="disableButton" class="btn btn-primary" onclick="changeSpan();">Change</button>

您當前選擇器選擇內部元素的所有span的編號爲#monitorStatusSpan但在這個元素中沒有任何span's。

您當前選擇的HTML應該是這樣的

<span id="monitorStatusSpan"><span>TEST</span></span>