为什么我的 jquery 函数 .show 在按钮上不起作用答案

【问题标题】：why does my function .show of jquery doesnt work on a button为什么我的 jquery 函数 .show 在按钮上不起作用
【发布时间】：2013-11-06 05:24:25
【问题描述】：

我有一个按钮，按下时会显示隐藏的 div 标签，但它不起作用，我不知道为什么。这是我的 html 代码：

<div class="cambio-imagen">
    <form id="form-cambio-imagen" action="usuario/imagechange/" method="POST" enctype="multipart/form-data">{% csrf_token %}
        <input type="file" name="us_picture" id="id_us_picture">
        <input type="submit" name="submit" value="cambiar" />
    </form>
</div>

还有我的javascript：

<script>
  function doIt() {
      $(".cambio-imagen").show("slow");
  }
  $("#boton-imagen").click(doIt);
  $("#form-cambio-imagen").submit(function (event) {
      $(".cambio-imagen").hide("fast");
  });
  }
  });
</script>

导入

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

有人可以帮帮我吗？我是 jquery 和 javascript 的新手。谢谢。

【问题讨论】：

函数 doIt() 没有在任何地方调用
doIt() 在哪里被调用？
你有语法错误
我编辑了您的问题，以便对您的 JS 应用适当的缩进（除了空格之外没有任何变化） - 您现在会注意到，很明显您在脚本的最后两行，语法错误会阻止整个工作。（即使您是否需要文档就绪处理程序的问题。）@Praveen 和 Marikkani - doIt() 被绑定为单击处理程序，但其他语法错误会阻止脚本工作。

标签： javascript jquery html css django

【解决方案1】：

你有语法错误，在 dom ready hadnler 中添加脚本

jQuery(function () {
    function doIt() {
        $(".cambio-imagen").show("slow");
    }
    $("#boton-imagen").click(doIt);
    $("#form-cambio-imagen").submit(function (event) {
        $(".cambio-imagen").hide("fast");
    });
});

【讨论】：

【解决方案2】：

脚本中的错误调用文档就绪

$(document).ready(function(){
    function doIt() {
        $(".cambio-imagen").show("slow");
    }
    $("#boton-imagen").click(doIt);
    $("#form-cambio-imagen").submit(function (event) {
        $(".cambio-imagen").hide("fast");
    });
});

【讨论】：

【解决方案3】：

请使用 jquery 切换方法。你可以达到你的要求。

查看此网址：http://api.jquery.com/toggle/

【讨论】：

如何修复 OP 脚本中的语法错误？为什么.show() 不起作用？

【解决方案4】：

试试看

$("#boton-imagen").click(function(){
    doIt();
});

你也有语法错误..试试

<script>
   $(document).ready(function(){
       $("#boton-imagen").click(function(){
          $(".cambio-imagen").show("slow");
       });
       $("#form-cambio-imagen").submit(function (event) {
           $(".cambio-imagen").hide("fast");
       });    
   });
</script>

【讨论】：

为什么？ $("#boton-imagen").click(doIt); 有效。（如何修复实际的语法错误？）

【解决方案5】：

试试看：

function doIt() {
      $(".cambio-imagen").show("slow");
}

$("#boton-imagen").click(
    doIt();
);

$("#form-cambio-imagen").submit(function (event) {
      $(".cambio-imagen").hide("fast");
  });

【讨论】：

为什么要添加匿名函数来包装对doIt()的调用？带有$("#boton-imagen").click(doIt); 的OP 版本有效。
您必须将事件处理程序绑定到“点击”JavaScript 事件
是的，$("#boton-imagen").click(doIt); 绑定doIt()。您可以选择使用匿名函数，但您不必这样做（当它所做的只是调用您可以直接绑定的另一个函数时，这是没有意义的）。
你必须使用 doIt();而不是 doIt
没有。用括号它立即调用该函数。如果没有括号，您将获得对可以绑定的函数的引用。在这里亲自查看：jsfiddle.net/zSPLa