有没有办法切换.append()jQuery方法?

时间:2013-07-17 05:22:51

标签: javascript jquery append toggle

我想追加另一个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>");
            });
        });

4 个答案:

答案 0 :(得分:2)

如果您使用toggleClass

,您可以获得相同的效果
$(this).toggleClass('selected');

然后在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;
}

来源:http://api.jquery.com/toggleClass/

答案 1 :(得分:1)

您可以使用toggleClass 将所需的样式放在某个类下并执行

   $("#btw").click(function(){
       $(this).toggleClass("requiredClass");
   });

答案 2 :(得分:1)

使用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>

答案 3 :(得分:1)

您可以通过为样式

提供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();
        }
    });
});