jquery - Jquery css更改问题

Question

简单地说，我想根据您在下拉菜单中选择的内容来更改 div 的 css 显示状态。这意味着，当我在下拉列表中选择一个项目时，它会将 div 的 cssdisplay属性从更改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 来摆脱那些讨厌的不可见的空白，你可以在这里试试。

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，因此它无效并且没有被加载。

您需要关闭选择功能和文档准备功能。