Question

我想在某些链接文字旁边添加一个图标，使手风琴展开和折叠。该文本已从“查看更多”更改为“查看更少”。查看工作演示 - http://bootply.com/106271

添加：

<span class="glyphicon glyphicon-chevron-up"></span>

停止文本更改工作。

以下是试图添加图标的损坏版本：http://bootply.com/106270

$(document).ready(function(){
    $("#morebtn").click(function(){
        $(this).html($(this).html() == "See more <span class="glyphicon glyphicon-chevron-up"></span>" ? "See less" : "See more <span class="glyphicon glyphicon-chevron-up"></span>");
    });
});

Answer 1

使用.indexOf()检查特定单词的可用性。另请注意，不要在"构造的字符串中使用"而是使用'

尝试，

$(document).ready(function(){
     $("#morebtn").click(function(){
       $(this).html($(this).html().indexOf("See more") > -1 ? "See less" : "See more <span class='glyphicon glyphicon-chevron-up'></span>");
     });
  });

Answer 2

你有不匹配的引号：

"See more <span class="glyphicon glyphicon-chevron-up" ... "
^                     ^                              ^     ^

要解决此问题，请使用单引号或转义双引号：

'See more <span class=" ... " ... '

"See more <span class=\" ... \" ... "

Working Bootply Demo

Answer 3

使用

覆盖整个网站的html内容

$(this).hmtl("");

不是个好主意。

而不是使用它，你这样做：

$(document).ready(function()
                  {
                    $("#morebtn").click(function()
                                        {
                                            $("#morebtn").val($("#morebtn").val().indexOf("See more") === 1 ?
                                                              $("#morebtn").val("See less")
                                                              : $("#morebtn").val('See more <span class="glyphicon glyphicon-chevron-up"></span>'));
                                        }
                                );
                  }
            );

值得一提的是，这条线无效：

"See more <span class="glyphicon glyphicon-chevron-up"

您的JavaScript控制台应显示此语法错误。因为你不能使用隐含相同的引号而不使用内部引号。你必须像这样逃避你的内部双引号：

class=\"glyphicon glyphicon-chevron-up\"

或者：我强烈建议您使用单引号和双引号的替代方法（顺序无关紧要），因为它对人类来说更容易阅读。它可以是单首或双首）：

'See more <span class="glyphicon glyphicon-chevron-up"></span>'
// or:
"See more <span class='glyphicon glyphicon-chevron-up'></span>"

希望这对你有所帮助。

jquery里面的HTML标记

3 个答案: