【问题标题】:Change image on input change using jQuery switch使用 jQuery 开关在输入更改时更改图像
【发布时间】:2014-08-28 11:07:38
【问题描述】:

我正在创建一个字体示例,该示例将在选项选择时更改。但是,它似乎不起作用。我对以前的问题使用了类似的格式,但不知何故,这次似乎没有响应.. 谢谢!

<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>

【问题讨论】:

  • 如果警报(图像)你得到什么?请试着告诉我
  • 它对我有用 - jsfiddle.net/u3pjujab
  • 请让你添加你的jquery库?
  • 嗯,它没有提醒。案例陈述可能有问题?
  • 多么奇怪。添加了 jQuery 库。这是不行的。

标签: javascript jquery fonts switch-statement


【解决方案1】:

替换这一行

switch (this.value)

switch ($(this).val())

【讨论】:

  • 两种情况都是正确的。一个是纯javascript,另一个是jquery
猜你喜欢
  • 2017-10-16
  • 2011-06-26
  • 1970-01-01
  • 1970-01-01
  • 2015-02-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多