Question

我正在尝试根据状态更改“显示更多”文本。这不起作用：

        <div id="description">
        text goes here
            </div>
            <div id="more-less-container">
                <a href="#" id="more-less">expand / collapse</a>
            </div>  
            <script>
            var open = false;
            $('#more-less').click(function() {
                if (open) {
                    $('#description').animate({height:'10em'}); 
                    $('#more-less').innerHTML ='show less';             
                }
                else {
                    $('#description').animate({height:'100%'});
                            $('#more-less').innerHTML ='show more'; 
                }
                open = !open;
            });
            </script>

Answer 1

使用$('#more-less').text('show more');代替innerHTML。

jQuery将DOM Elements包装到jQuery对象中，如果你想使用innerHTML属性，你可以使用.html()函数 - 但是.text()更好，因为它会html-逃避内容。

真正访问innerHTML属性的另一种方法是将DOM元素从jQuery对象中取出，如下所示：$('#more-less')[0].innerHTML = 'show more';。

Answer 2

我相信你可以使用像

这样的东西

$('#more-less').html("show more");

或

$('#more-less').html("show less");

Answer 3

而不是：

$('#more-less').innerHTML ='show less';

说：

$('#more-less').html('show less');

Answer 4

innerHTML是一个DOM函数，对于jQuery使用.html（），因为你正在操作一个jQuery对象

$('#more-less').html('show less');

如何通过jQuery更改文本？

4 个答案: