Есть ли способ переключить метод .append() jQuery?

Question

Я хочу добавить еще один 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>"); 
      }); 
     }); 

Answer 1

Вы можете достичь того же эффекта, если вы используете 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/

Answer 2

Вы можете использовать toggleClass.
Поместите нужный стиль под каким-нибудь классом и сделать

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

Answer 3

Используйте 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> 

Answer 4

Вы можете удалить 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(); 
     } 
    }); 
});