Question

我正在使用bootstrap和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/

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

有谁知道我错过了什么？

Answer 1

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

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

只需要查找这样的ID就足够了：

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

Answer 2

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

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

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

<强> working demo

Answer 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>

JS

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

PS。不要使用内联JS！

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>

您当前的选择器会选择ID为span的所有#monitorStatusSpan内部元素，但在此元素中没有span's。

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

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

无法使用JQuery更改Span文本

4 个答案: