无法使用JQuery更改Span文本

I am using bootstrap and JQuery.

我正在使用bootstrap和JQuery。

HTML

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

JavaScript的

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

Here is the fiddle. http://jsfiddle.net/alamzeeshan/5bw8d2ta/7/

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

But still the span text is not getting changed.

但是跨度文本仍然没有改变。

Does anyone know what am I missing?

有谁知道我错过了什么？

4 个解决方案

#1

Currently, you're looking for a span inside your #monitorStatusSpan (#monitorStatusSpan span).

目前，您正在寻找#monitorStatusSpan（#monitorStatusSpan span）内的跨度。

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

It's enough to only look for the ID like this:

仅仅查找这样的ID就足够了：

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

#2

You have incorrect selector. Selector you have used finds #monitorStatusSpan element and then span element in it. which do not exist.

你有不正确的选择器。您使用的选择器找到#monitorStatusSpan元素，然后在其中包含span元素。哪个不存在。

As IDs are unique, you can simply use id selector to target the required element:

由于ID是唯一的，您只需使用id选择器来定位所需的元素：

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

working demo

工作演示

#3

HTML

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

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

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

PS. DONT USE inline JS!

PS。不要使用内联JS！

#4

Try this

尝试这个

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>

Your current selector selects all span's inside element with id #monitorStatusSpan but in this element there are not any span's.

您当前的选择器选择id为#monitorStatusSpan的所有span内部元素，但在此元素中没有任何span。

For your current selector html should look like this

对于您当前的选择器，html应如下所示

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

#1