assingning переменную стиля в JQuery

Question

Я использовал следующий код для изменения содержимого стиля ..

$("#Button1").click(function() { 

    var str="12"; 
    if ($('#additionalStyles').length) { 
     $('#additionalStyles').remove(); 
    } else { 
     $('head').append('<style id="additionalStyles">.noti_bubble:before{color: yellow; content:'"str"';}</style>'); 
    } 
}); 

Фактический код КСС ......

.noti_bubble:before{ 
    position:absolute; 
    padding:1px 2px 1px 2px; 
    background-color:red; 
    content:"5"; 
    color:white; 
    font-weight:bold; 
    height : 11px; 
    width: 15px; 
} 

jquery изменяет цвет на желтый. но не изменить содержание от 5 до 12 .... Просьба помочь мне ....

Answer 1

Существует проблемы конкатенации строк в скрипте

$("#Button1").click(function() { 
 
    var str = "12"; 
 
    if ($('#additionalStyles').length) { 
 
    $('#additionalStyles').remove(); 
 
    } else { 
 
    $('head').append('<style id="additionalStyles">.noti_bubble:before{color: yellow; content:"' + str + '";}</style>'); 
 
    } 
 
});

.noti_bubble:before { 
 
    position: absolute; 
 
    padding: 1px 2px 1px 2px; 
 
    background-color: red; 
 
    content: "5"; 
 
    color: white; 
 
    font-weight: bold; 
 
    height: 11px; 
 
    width: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="Button1">Button1</button> 
 
<span class="noti_bubble"></span>

---

Но Я бы рекомендовал использовать другой класс для изменения стиля, если это возможно, вместо добавления определения динамического стиля (возможно, только если значение содержимого не является динамическим)

$("#Button1").click(function() { 
 
    $('.noti_bubble').toggleClass('special'); 
 
});

.noti_bubble:before { 
 
    position: absolute; 
 
    padding: 1px 2px 1px 2px; 
 
    background-color: red; 
 
    content: "5"; 
 
    color: white; 
 
    font-weight: bold; 
 
    height: 11px; 
 
    width: 15px; 
 
} 
 
.noti_bubble.special:before { 
 
    color: yellow; 
 
    content: "12"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="Button1">Button1</button> 
 
<span class="noti_bubble"></span>

Answer 2

раз попробовать это:.

$('head').append('<style id="additionalStyles">.noti_bubble:before{color: yellow; content:"'+str+'";}</style>');