Question

我正在创建一个将在选项选择上更改的字体示例。但是，它似乎没有起作用。我已经使用了类似的格式来解决之前的问题，但不知怎的，这次似乎没有响应..谢谢！

<div class="form-input">
<label class="label" for="font-choice">Not sure which font? Choose from our top 12: </label>
<select class="form-select" id="engraving-type">
<option style="font-family: Arial" value="Arial">&nbsp; &nbsp; &nbsp; Arial</option>
<option style="font-family: Baskerville" value="Baskerville"> &nbsp; &nbsp; &nbsp; Baskerville</option>
<option style="font-family: Baroness Bold" value="Baroness Bold"> &nbsp; &nbsp; &nbsp; Baroness Bold</option>
<option style="font-family: Cantania" value="Cantania"> &nbsp; &nbsp; &nbsp; Cantania</option>
<option style="font-family: Century Gothic" value="Century Gothic"> &nbsp; &nbsp; &nbsp; Century Gothic</option>
<option style="font-family: Chinese" value="Chinese"> &nbsp; &nbsp; &nbsp; Chinese</option>
<option style="font-family: Edwardian Script" value="Edwardian Script"> &nbsp; &nbsp; &nbsp; Edwardian Script</option>
<option style="font-family: Dagobent" value="Dagobent"> &nbsp; &nbsp; &nbsp; Dagobent</option>
<option style="font-family: Goudy" value="Goudy"> &nbsp; &nbsp; &nbsp; Goudy</option>
<option style="font-family: Palatino" value="Palatino"> &nbsp; &nbsp; &nbsp; Palatino</option>
<option style="font-family: Baroness Bold" value="Baroness Bold"> &nbsp; &nbsp; &nbsp; Baroness Bold</option>
<option style="font-family: Times New Roman" value="Times New Roman"> &nbsp; &nbsp; &nbsp; Times New Roman</option>
</select>
</div>


<div class="form-input">
<label class="label" for="form-table">Font example:</label><span id="text-example"><img id="font-image" src="/images/fonts/Font-Baskerville.jpg" /></span>
</div>
<script>
  $( document ).ready(function() {
  $("#engraving-type").change(function(){
    switch (this.value) {
    case 'Arial': 
        var image = 'Font-Arial.jpg'; 
        break;
    case 'Baskerville': 
       var image = '/#'; 
        break;
    default:
       var image = 'Font-Baskerville.jpg'; 
        break;
    }
    $( "#font-image" ).attr("src", "/images/fonts/" + image);
    });
});
</script>

Answer 1

替换此行

switch (this.value)

与

switch ($(this).val())

使用jQuery开关更改输入更改时的图像

1 个答案: