简体   繁体   English

jQuery中的HTML标记

[英]HTML markup inside jquery

I want to add a icon next to some link text that makes an accordion expand and collapse. 我想在一些链接文本旁边添加一个图标,以使手风琴展开和折叠。 The text already changes from 'See more' to 'See less'. 文本已经从“查看更多”更改为“查看更少”。 see the working demo - http://bootply.com/106271 看到有效的演示-http: //bootply.com/106271

So adding: 因此添加:

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

stops the text change work. 停止文本更改工作。

Here is the broken version trying to add the icon: http://bootply.com/106270 这是尝试添加图标的损坏版本: 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>");
    });
});

Use .indexOf() to check the availability of a particular word. 使用.indexOf()检查特定单词的可用性。 And also keep in mind that dont use " inside of a string which is being constructed by " instead use ' 也请记住,不使用"内部正在由构造一个字符串" ,而不是用'

Try, 尝试,

$(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>");
     });
  });

You have mismatching quotes: 您的报价不匹配:

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

To fix this, either use single quotes or escape the double quotes: 要解决此问题,请使用单引号或转义双引号:

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

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

Working Bootply Demo . Bootply工作演示

Overriding the whole web site html content with 用覆盖整个网站的html内容

$(this).hmtl("");

Isn´ta good idea. 这不是个好主意。

Instead of using that, you doing it like this: 而不是使用它,您可以这样做:

$(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>'));
                                        }
                                );
                  }
            );

It is also worth to mention, that this line could not work: 还值得一提的是,此行不起作用:

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

Your JavaScript console should show up a syntax error for this. 您的JavaScript控制台应为此显示语法错误。 Because you can´t use implicit the same quotes withou escaping the inner ones. 因为您不能在不使用内部引号的情况下使用隐式相同的引号。 You have to escape your inner double quotes like this: 您必须这样转义内部双引号:

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

OR: I highly recommend you to use the alternative method with single and double quotes (the order doesn´t matter), because it´s easier readable for human beings. 或:我强烈建议您使用单引号和双引号的替代方法(顺序无关紧要),因为它对人类更容易阅读。 It could be single or double first): 它可以是单打或双打):

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

Hopefully this has helped you. 希望这对您有所帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM