html jquery点击功能不起作用？ [关闭]答案

【问题标题】：html jquery click function not working? [closed]html jquery点击功能不起作用？ [关闭]
【发布时间】：2014-09-02 07:53:49
【问题描述】：

我使用的是 jQuery 1.10.2，但这段代码不起作用：

$("#hbox99").click(function(e) {
    var loginoutbox = document.getElementById("cbox");

    fromtop = cbox.style.bottom;

    if(fromtop=="0px")  {
        $("#cbox").css('bottom','-365');}
    else{
        $("#cbox").css('bottom','0');}
});

HTML 代码：

<div class="data" id="cbox">
<div class="databox" id="hbox99"><div class="headtxt">Text</div></div>
</div>

【问题讨论】：

你能展示整个代码和HTML吗？您可能只是缺少代码周围的 DOM 就绪处理程序，但谁能说出来呢？ :)
不工作是指...？它应该做什么，而不是做什么？错误信息？你有没有做过任何基本的调试（fromtop 等的值）？
我不知道 cbox 是否是 Javascript 的东西，但您将 getElementById 分配给了您不使用的变量。你想用它吗？
但是你的 JavaScript 在哪里调用呢？您确定在调用 JavaScript 之前先加载 HTML 项目吗？这也是你的整个 JavaScript，cbox 定义在哪里？ @Zhouster 不是。
这是错误的原因

标签： javascript jquery html

【解决方案1】：

没有看到更多代码（HTML 和 JavaScript），但它看起来就像你有一个空引用异常，因为你正在创建变量“loginoutbox”，但随后尝试引用名为“cbox”的对象的样式属性。

你可能想要这样做-

$("#hbox99").click(function(e) {
   var loginOutBox = document.getElementById("cbox"), fromTop = loginOutBox.style.bottom;

   if (fromTop === "0px") {
      $("#cbox").css('bottom',-365);
   }
   else {
      $("#cbox").css('bottom',0);
   }
});

除了尝试修复代码之外，我还将“fromTop”分配给一个变量（否则它会变成一个隐式变量），变量名使用驼峰式大小写以提高可读性，并使用（通常推荐的）三等号相等运算符（检查 both 类型和值 - 养成的好习惯）。我还将您的“底部”值从字符串（用引号括起来）更改为整数，如果我没记错的话，它将由 jQuery 为您转换为像素。

如果它是一个固定值而不是一个计算出来的值，那么它可能值得写成一个字符串，但要使用单位，例如'-365px'。

【讨论】：

还值得花一些时间查看您选择的浏览器的开发人员工具，因为这些工具很可能会告诉您错误，而无需求助于 StackOverflow 上的问题。尽管如此，欢迎您，我希望您喜欢学习 JavaScript。