Question

我正在尝试使用以下代码来更改颜色和字体系列。颜色在变化，但是font-family没有变化。我在这里想念的是什么？我该如何解决？

$(document).ready(function(){
  $("body").on("click",".selectableColor", function(){
      var tColor = $(this).attr("data-color"); 
    $('.change').css('color','#'+tColor+'');
  });
  $("body").on("click",".fontBox", function(){
      var tStyle = $(this).attr("data-style"); 
    $('.change').css('font-family', tStyle); 
  });
});

HTML

    <div class="change_area_header" style="overflow: hidden; outline: currentcolor none medium;" tabindex="2">
      <div class="selectableColor" style="background-color:#ffebee" data-color="ffebee"></div>
      <div class="selectableColor" style="background-color:#ffcdd2" data-color="ffcdd2"></div> 
    </div>
    <!--Font Family-->
    <div class="change_area_header" style="overflow: hidden; outline: currentcolor none medium;" tabindex="4">
      <div class="fontBox" style="font-family: 'Montserrat', sans-serif;" data-style="'Montserrat', sans-serif;">MontSerrat</div>
      <div class="fontBox" style="font-family: 'Aleo', serif;" data-style="'Aleo', serif;">Aleo</div>
      <div class="fontBox" style="font-family: 'Raleway', sans-serif;" data-style="'Raleway', sans-serif;">Raleway</div>
    </div>

来自 codepen.io

的

DEMO

Answer 1

将字体选择器中的分号删除为

来自

data-style="'Montserrat', sans-serif;"

收件人

data-style="'Montserrat', sans-serif"

变成

<!–– ... -->
 <div class="fontBox" style="font-family: 'Montserrat', sans-serif;" data-style="'Montserrat', sans-serif">MontSerrat</div>
<!–– ... -->

笔：https://codepen.io/ijasnijas/pen/wNvPXa

Answer 2

请勿使用;末尾的data-style="'Montserrat', sans-serif;"

使用： data-style="'Montserrat', sans-serif"

Answer 3

您需要转义字符。您的声明将转换为

$('.change').css('font-family', ''Montserrat', sans-serif;')

在您的示例中，像$('.change').css('font-family', 'Segoe UI')这样简单的事情起作用。

除了拥有data-style="'Raleway', sans-serif;"之外，您还只能使用字体名称data-fontname="Raleway"并在代码中准备字体链。

Answer 4

实际上，我相信您对解决问题的想法是不正确的。我看过你的密码为什么在body上绑定点击动作？您可以使用jQuery选择确切的标签，然后将操作回调绑定到该标签。

此外，您可以在CSS中声明某些HTML类不使用内联代码，并且可以为标记添加或删除类，而不直接将styles属性分配给所选元素。这是不安全的，因为它不可调试。就像您看到的一样，您遇到了一个简单的小问题，无法跟踪和修复它。

我会像下面那样清理您的代码，给您写一些示例，然后使用此示例完成整个项目：

$(document).on('ready', function(){
  var resultEl = $('.result');
  $('.blue').on('click', function(){
    resultEl.removeClass('red').addClass('blue');
  });
  $('.red').on('click', function(){
    resultEl.removeClass('blue').addClass('red');
  });
});

.result {
  font: normal 20px arial;
  margin-bottom: 20px;
}

.blue {
  color: #f00;
  font-family: tahoma;
  margin-bottom: 20px;
  cursor: pointer;
}

.red {
  color: #00f;
  font-family: monospace;
  margin-bottom: 20px;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="result">The Result of color and font</div>
<div class="blue">color&font</div>
<div class="red">color&font</div>

jQuery单击以更改颜色有效，但出了点问题，更改字体系列

4 个答案: