Question

为什么这在我的php文档中不起作用的任何想法？当我在jsfiddle上测试时，一切正常。

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $("a").click(function() {
            $("div.info").hide();
            $("div." + this.className).show();
        });
    </script>
</head>

<body>
    <div class="shipping-container">
        <a href="#" class="ups">Show UPS info</a>
        <a href="#" class="fedex">Show Fedex info</a>
        <div class="ups info" style="display:none">the info for ups</div>
        <div class="fedex info" style="display:none">Who let the dogs out</div>
    </div>
</body>

Answer 1

你错过了文件就绪处理程序，试试这个：

<script type="text/javascript">
    $(function() {
        $("a").click(function() {
            $("div.info").hide();
            $("div." + this.className).show();
        });
    });
</script>

或者，保留script标记，但将其放在文档末尾，</body>标记之前。

Answer 2

您应该确保只在DOM完全加载后才加载您的JQuery代码：

$(document).ready(function() {

   $("a").click(function() {
       $("div.info").hide();
       $("div." + this.className).show();
   });

});

Answer 3

您正在链接元素存在之前运行脚本。

在jsfiddle中，默认情况下将代码放在加载文档后运行的事件中。使用ready事件在您的代码中执行此操作：

<script type="text/javascript">
$(document).ready(function(){
  $("a").click(function() {
    $("div.info").hide();
    $("div." + this.className).show();
  });
});
</script>

Answer 4

我认为你应该在标题中这样做：

<script type="text/javascript">
$(document).ready(function() {
  $("a").click(function() {
      $("div.info").hide();
      $("div." + this.className).show();

});
</script>

这将确保在您尝试附加任何事件处理程序之前加载所有DOM对象（尤其是a元素）。

为什么我的事件处理程序绑定jQuery没有触发？

4 个答案: