Jquery css更改问题

Question

简单地说，我想根据您在下拉列表中选择的内容来更改div的css显示状态。这意味着，当我在下拉列表中选择一个项目时，会将div的css display属性从none更改为block。

我的CSS

<style>
  .lp_claims, .gap_claims, .home_claims, .motor_claims{ display:none;}
</style>

HTML

<select name="claimsform">
<option value="lp_claims"> Loan Protection </option>
 <option value="gap_claims"> GAP or Cash Assist </option>
 <option value="home_claims"> Home </option>
 <option value="land_claims"> Landlords </option>
<option value="motor_claims"> Car </option>
</select> 

<div class="lp_claims">
<p> <strong>Loan </strong><br>
Contact  us  </p>
</div>

<div class="gap_claims">
<p> <strong>GAP or Cash Assist </strong><br>
Contact  us  </p></div>

<div class="home_claims">
<p><strong>Home </strong><br>
Contact  us  .</p>
</div>

<div class="motor_claims">
<p><strong>Motor</strong><br>
Contact  us .</p>
</div>

和Jquery

<script type="text/javascript">
$(document).ready(function(){
$('select').on('change', function(){
var val = $(this).val();
$('div').hide();
$('.' + val).css('display','block'); }).change();
});
</script>

这是小提琴：http://jsfiddle.net/En4Ka/

确定现在一切正常。我的问题是：为什么这不适用于我的HTML文件：http://fitfixtraining.com.au/test/index.html

Answer 1

因为（正如ahren [+1]所说）你的代码中有非法字符，请查看控制台的错误。

通常在您从jsfiddle复制代码时会发生。

以下是Notepad++的屏幕截图，我将为您突出显示：

编辑：只需编写一个快速的JS来摆脱那些讨厌的隐形空格，你可以尝试here。

Answer 2

从JSFiddle复制和粘贴时，您复制了非法的额外字符并抛出错误。

你的是index.html第49行。

$('select').on('change', function(){
    var val = $(this).val();
    $('div').hide();
    $('.' + val).css('display','block');
}).change();​
//Uncaught SyntaxError: Unexpected token ILLEGAL

此外，正如 PhillipKregg 所指出的，您有语法错误。有关详细信息，请参阅他的回答。

Answer 3

见这一行：

 $('.' + val).css('display','block'); }).change();​

摆脱额外的大括号 - }

Answer 4

您没有正确关闭您的JavaScript，因此它无效且未加载。

您需要关闭选择功能和文档就绪功能。