WordPress是挡住了我的jQuery脚本

Question

**脚本菜鸟免责声明**

在我的网站，我希望它字段添加到联系人的形式充当我的产品线项目，但由于某些原因的wordpress不允许我的功能工作。以下是它应该做的事情http://jsfiddle.net/LQ85Z/1/以下是我的网站如何处理它http://ocblinds.com/order-now/。我的网站不允许显示div。任何人都可以看到我做错了什么？

$(function() { 
$('#select').change(function() { 
    if ($(this).val() == "1") { 
     $('#line_1').show(); 
     $('#line_2').hide(); 
     $('#line_3').hide(); 
     $('#line_4').hide(); 
     $('#line_5').hide(); 
     $('#line_6').hide(); 
     $('#line_7').hide(); 
     $('#line_8').hide(); 
     $('#line_9').hide(); 
     $('#line_10').hide(); 

     } 
    }); 
}); 
$(function() { 
$('#select').change(function() { 
    if ($(this).val() == "2") { 
     $('#line_1').show(); 
     $('#line_2').show(); 
     $('#line_3').hide(); 
     $('#line_4').hide(); 
     $('#line_5').hide(); 
     $('#line_6').hide(); 
     $('#line_7').hide(); 
     $('#line_8').hide(); 
     $('#line_9').hide(); 
     $('#line_10').hide(); 
     } 
    }); 
}); 
    $(function() { 
    $('#select').change(function() { 
    if ($(this).val() == "3") { 
     $('#line_1').show(); 
     $('#line_2').show(); 
     $('#line_3').show(); 
     $('#line_4').hide(); 
     $('#line_5').hide(); 
     $('#line_6').hide(); 
     $('#line_7').hide(); 
     $('#line_8').hide(); 
     $('#line_9').hide(); 
     $('#line_10').hide(); 

     } 
    }); 
}); 
    $(function() { 
    $('#select').change(function() { 
    if ($(this).val() == "4") { 
     $('#line_1').show(); 
     $('#line_2').show(); 
     $('#line_3').show(); 
     $('#line_4').show(); 
     $('#line_5').hide(); 
     $('#line_6').hide(); 
     $('#line_7').hide(); 
     $('#line_8').hide(); 
     $('#line_9').hide(); 
     $('#line_10').hide(); 
     } 
    }); 
}); 
    $(function() { 
    $('#select').change(function() { 
    if ($(this).val() == "5") { 
     $('#line_1').show(); 
     $('#line_2').show(); 
     $('#line_3').show(); 
     $('#line_4').show(); 
     $('#line_5').show(); 
     $('#line_6').hide(); 
     $('#line_7').hide(); 
     $('#line_8').hide(); 
     $('#line_9').hide(); 
     $('#line_10').hide(); 
     } 
    }); 
}); 
    $(function() { 
    $('#select').change(function() { 
    if ($(this).val() == "6") { 
     $('#line_1').show(); 
     $('#line_2').show(); 
     $('#line_3').show(); 
     $('#line_4').show(); 
     $('#line_5').show(); 
     $('#line_6').show(); 
     $('#line_7').hide(); 
     $('#line_8').hide(); 
     $('#line_9').hide(); 
     $('#line_10').hide(); 
     } 
    }); 
}); 
    $(function() { 
    $('#select').change(function() { 
    if ($(this).val() == "7") { 
     $('#line_1').show(); 
     $('#line_2').show(); 
     $('#line_3').show(); 
     $('#line_4').show(); 
     $('#line_5').show(); 
     $('#line_6').show(); 
     $('#line_7').show(); 
     $('#line_8').hide(); 
     $('#line_9').hide(); 
     $('#line_10').hide(); 
     } 
    }); 
}); 
    $(function() { 
    $('#select').change(function() { 
    if ($(this).val() == "8") { 
     $('#line_1').show(); 
     $('#line_2').show(); 
     $('#line_3').show(); 
     $('#line_4').show(); 
     $('#line_5').show(); 
     $('#line_6').show(); 
     $('#line_7').show(); 
     $('#line_8').show(); 
     $('#line_9').hide(); 
     $('#line_10').hide(); 
     } 
    }); 
}); 
    $(function() { 
    $('#select').change(function() { 
    if ($(this).val() == "9") { 
     $('#line_1').show(); 
     $('#line_2').show(); 
     $('#line_3').show(); 
     $('#line_4').show(); 
     $('#line_5').show(); 
     $('#line_6').show(); 
     $('#line_7').show(); 
     $('#line_8').show(); 
     $('#line_9').show(); 
     $('#line_10').hide(); 
     } 
     }); 
    }); 
     $(function() { 
     $('#select').change(function() { 
    if ($(this).val() == "10") { 
     $('#line_1').show(); 
     $('#line_2').show(); 
     $('#line_3').show(); 
     $('#line_4').show(); 
     $('#line_5').show(); 
     $('#line_6').show(); 
     $('#line_7').show(); 
     $('#line_8').show(); 
     $('#line_9').show(); 
     $('#line_10').show(); 
     } 
    }); 
});​ 

Answer 1

你的问题来自于事实，你必须嵌入在你orderform.js脚本的底部非法字符：

$(function() { 
    $('#select').change(function() { 
     if ($(this).val() == "10") { 
      $('#line_1').show(); 
      $('#line_2').show(); 
      $('#line_3').show(); 
      $('#line_4').show(); 
      $('#line_5').show(); 
      $('#line_6').show(); 
      $('#line_7').show(); 
      $('#line_8').show(); 
      $('#line_9').show(); 
      $('#line_10').show(); 
     } 
    }); 
});​ 

删除它，它会正常工作。

您似乎也已将JavaScript代码嵌入到页面本身内（它存在于页面源代码和orderform.js中）。删除这是在源代码的重复，特别是它还含有非法字符：

<script type="text/javascript">// <![CDATA[ 
    $(function() { 
    $('#select').change(function() { 
     if ($(this).val() == "1") { 
      $('#line_1').show(); 
      $('#line_2').hide(); 
      $('#line_3').hide(); 
      $('#line_4').hide(); 
      $('#line_5').hide(); 
      $('#line_6').hide(); 
      $('#line_7').hide(); 
      $('#line_8').hide(); 
      $('#line_9').hide(); 
      $('#line_10').hide();</p> 
<p>  } 
    }); 
}); 

（注意< /P>和< p>）

您还可以优化你的代码：

$(function() { 
    $('#select').change(function() { 
     var i, show = parseInt($(this).val(), 10); 
     for (i = 1; i <= show; i++) { 
      $('#line_' + i).show(); 
     } 
     for (i = show; i < 10; i++) { 
      $('#line_' + i).hide(); 
     } 
    }); 
}); 

或通过使用其他问题的答案（更优雅）。

Answer 2

WordPress以无冲突模式运行jQuery，因此它不是$。下面的方法可以让你在.ready()使用$：

jQuery(document).ready(function ($) { 
    // Put your scripting here... 
});