javascript 有没有办法切换 .append() jQuery 方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17691725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to toggle the .append() jQuery method?
提问by Matthew
I want to appendToggle another img in place of plus.svg. If you guys know a way to somehow toggle the .append()method, that would be great. I want to change the CSS when you click on it, then change it again, basically.
我想 appendToggle 另一个 img 代替 plus.svg。如果你们知道一种以某种方式切换.append()方法的方法，那就太好了。我想在你点击它时更改 CSS，然后再次更改，基本上。
$(function(){
$("#btw").click(function(){
$("#btwl").slideToggle(300);
$(this).append("<style>#btw::before{content: url(minus.svg);width: 16px;eight: 16px;background-size: 16px 16px;background-repeat: no-repeat;vertical-align: middle;padding-right: 10px;}</style>");
});
});
回答by jrthib
You could achieve the same effect if you use toggleClass:
如果你使用，你可以达到同样的效果toggleClass：
$(this).toggleClass('selected');
Then in your CSS stylesheet do something like:
然后在您的 CSS 样式表中执行以下操作：
.selected::before {
content: url(minus.svg);
width: 16px;
height: 16px;
background-size: 16px 16px;
background-repeat: no-repeat;
vertical-align: middle;
padding-right: 10px;
}
回答by Loken Makwana
You can remove the css by providing id to the style
您可以通过为样式提供 id 来删除 css
$(function(){
$("#btw").click(function(){
$("#btwl").slideToggle(300);
if($('#btwl').is(':hidden')) {
$(this).append("<style id='toggle_css'>#btw::before{content: url(minus.svg);width: 16px;eight: 16px;background-size: 16px 16px;background-repeat: no-repeat;vertical-align: middle;padding-right: 10px;}</style>");
} else {
$('#toggle_css').remove();
}
});
});
回答by xyz
you can use toggleClass.
Put the required style under some class and do
您可以使用toggleClass。
将所需的样式放在某个类下并执行
$("#btw").click(function(){
$(this).toggleClass("requiredClass");
});
回答by Shawn31313
Use the toggleClassMethod:
使用toggleClass方法：
<style style="text/css">
.before::before{
content: url(minus.svg);
width: 16px;
height: 16px;
background-size: 16px 16px;
background-repeat: no-repeat;
vertical-align: middle;
padding-right: 10px;
}
</style>
<script type="text/javascript">
$(function(){
$("#btw").click(function(){
$("#btwl").slideToggle(300);
$(this).toggleClass("before");
});
});
</script>
