将变量赋给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>');
    }
});

实际的css代码是......

.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>');