javascript - 如何通过 jQuery 更改文本？

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 元素包装到 jQuery 对象中，如果您想使用 innerHTML 属性，您可以使用 .html() 函数代替 - 但是 .text() 更好，因为它会对内容进行 html 转义。

要真正访问 innerHTML 属性，另一种方法是从 jQuery 对象中获取 DOM 元素，例如:$('#more-less')[0]。 innerHTML = '显示更多';.