[英]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=\" ... \" ... "
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.